Banner

'use client'

import { mergeProps } from '@base-ui/react/merge-props'
import { useRender } from '@base-ui/react/use-render'
import { cva, type VariantProps } from 'class-variance-authority'
import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

// Each variant has its own tint and icon colour. The variant is also carried by the icon and the screen reader prefix,
// never by colour alone.
const bannerVariants = cva(
	'group/banner w-full border-b text-sm text-foreground [--banner-max-width:var(--container-7xl)]',
	{
		variants: {
			variant: {
				info: 'border-info-border bg-info-subtle [&_[data-slot=banner-icon]]:text-info-subtle-foreground',
				warning: 'border-warning-border bg-warning-subtle [&_[data-slot=banner-icon]]:text-warning-subtle-foreground',
				destructive:
					'border-destructive-border bg-destructive-subtle [&_[data-slot=banner-icon]]:text-destructive-subtle-foreground',
				success: 'border-success-border bg-success-subtle [&_[data-slot=banner-icon]]:text-success-subtle-foreground',
			},
		},
		defaultVariants: {
			variant: 'info',
		},
	},
)

type BannerVariant = NonNullable<VariantProps<typeof bannerVariants>['variant']>

const defaultIcons: Record<BannerVariant, React.ElementType> = {
	info: InfoIcon,
	warning: TriangleAlertIcon,
	destructive: CircleAlertIcon,
	success: CircleCheckIcon,
}

const defaultLabels: Record<BannerVariant, string> = {
	info: 'Information',
	warning: 'Warning',
	destructive: 'Error',
	success: 'Success',
}

function Banner({
	className,
	variant = 'info',
	role = 'status',
	icon,
	label,
	open: openProp,
	defaultOpen = true,
	onOpenChange,
	onDismiss,
	dismissible,
	closeLabel = 'Dismiss',
	children,
	...props
}: Omit<React.ComponentProps<'div'>, 'role'> &
	VariantProps<typeof bannerVariants> & {
		/**
		 * `status` (default) is announced politely when the message appears after the page has loaded. Use `alert` only for
		 * urgent messages, such as an ongoing outage; screen readers interrupt the user to read it.
		 */
		role?: 'status' | 'alert'
		/** Replace the variant's icon, or pass `false` to hide it */
		icon?: React.ReactNode
		/**
		 * Screen reader prefix that names the kind of message, such as "Warning". Defaults to an English label for the
		 * variant; pass a translation, or `false` when the title already says it.
		 */
		label?: string | false
		/** Controlled visibility */
		open?: boolean
		/** Initial visibility when uncontrolled */
		defaultOpen?: boolean
		/** Called with the new visibility when the banner is dismissed */
		onOpenChange?: (open: boolean) => void
		/** Called when the user dismisses the banner. Passing it shows the dismiss button */
		onDismiss?: () => void
		/** Show the dismiss button. Defaults to `true` when `onDismiss` or `onOpenChange` is passed */
		dismissible?: boolean
		/** Accessible name of the dismiss button */
		closeLabel?: string
	}) {
	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
	const open = openProp ?? uncontrolledOpen
	const showDismiss = dismissible ?? (onDismiss !== undefined || onOpenChange !== undefined)
	const resolvedVariant: BannerVariant = variant ?? 'info'

	if (!open) return null

	const Icon = defaultIcons[resolvedVariant]
	const prefix = label === false ? null : (label ?? defaultLabels[resolvedVariant])

	function dismiss() {
		if (openProp === undefined) setUncontrolledOpen(false)
		onOpenChange?.(false)
		onDismiss?.()
	}

	return (
		<div
			data-slot="banner"
			data-variant={resolvedVariant}
			role={role}
			className={cn(bannerVariants({ variant: resolvedVariant }), className)}
			{...props}
		>
			<div
				data-slot="banner-container"
				className="mx-auto flex w-full max-w-(--banner-max-width) items-start gap-3 px-4 py-2.5 sm:px-6"
			>
				{icon === false ? null : (
					<span
						data-slot="banner-icon"
						aria-hidden="true"
						className="flex h-5 shrink-0 items-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
					>
						{icon ?? <Icon />}
					</span>
				)}
				<div data-slot="banner-content" className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-3 gap-y-1 leading-5">
					{prefix ? <span className="sr-only">{`${prefix}: `}</span> : null}
					{children}
				</div>
				{showDismiss ? (
					<Button
						data-slot="banner-close"
						variant="ghost"
						size="icon-sm"
						aria-label={closeLabel}
						onClick={dismiss}
						className="-my-1.5 -me-2 hover:bg-foreground/10 dark:hover:bg-foreground/10"
					>
						<XIcon aria-hidden="true" />
					</Button>
				) : null}
			</div>
		</div>
	)
}

function BannerTitle({ className, ...props }: React.ComponentProps<'p'>) {
	return <p data-slot="banner-title" className={cn('font-medium', className)} {...props} />
}

function BannerDescription({ className, ...props }: React.ComponentProps<'p'>) {
	return (
		<p
			data-slot="banner-description"
			className={cn('min-w-0 text-pretty wrap-break-word [&_a]:underline [&_a]:underline-offset-4', className)}
			{...props}
		/>
	)
}

// Renders a link by default. Use `render={<button type="button" />}` for an action that is not navigation.
function BannerAction({ className, render, ...props }: useRender.ComponentProps<'a'>) {
	return useRender({
		defaultTagName: 'a',
		props: mergeProps<'a'>(
			{
				className: cn(
					'inline-flex min-h-6 cursor-pointer items-center gap-1 rounded-sm font-medium whitespace-nowrap underline underline-offset-4 outline-none hover:decoration-2 focus-visible:ring-3 focus-visible:ring-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
					className,
				),
			},
			props,
		),
		render,
		state: {
			slot: 'banner-action',
		},
	})
}

export { Banner, BannerTitle, BannerDescription, BannerAction, bannerVariants }