Alert banner

"use client";

import * as React from "react";
import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type Tone = "info" | "success" | "warning" | "error";

type AlertBannerProps = Omit<React.ComponentProps<"div">, "title" | "children"> & {
  /** Picks the icon and the spoken prefix. */
  tone?: Tone;
  /** Bold lead, then the rest of the message in the same line. */
  title?: string;
  children: React.ReactNode;
  /** One action on the right, usually a ghost sm Button. */
  action?: React.ReactNode;
  /** Adds the dismiss button. The banner removes itself, then calls this. */
  onDismiss?: () => void;
  dismissLabel?: string;
};

const ICON = { info: InfoIcon, success: CircleCheckIcon, warning: TriangleAlertIcon, error: CircleAlertIcon } as const;
const LABEL = { info: "Info", success: "Success", warning: "Warning", error: "Error" } as const;

/**
 * A full-width, dismissible banner for the state of the whole page: an outage, a failed sync,
 * an expiring plan. State is the icon and a spoken prefix, never colour. Errors tint the icon with destructive.
 */
export function AlertBanner({
  tone = "info",
  title,
  children,
  action,
  onDismiss,
  dismissLabel = "Dismiss banner",
  className,
  ...props
}: AlertBannerProps) {
  const [dismissed, setDismissed] = React.useState(false);
  if (dismissed) return null;
  const Icon = ICON[tone];
  const urgent = tone === "error" || tone === "warning";

  return (
    <div
      role={urgent ? "alert" : "status"}
      data-slot="alert-banner"
      data-tone={tone}
      className={cn("flex w-full items-center gap-3 border-b bg-muted px-4 py-2 text-sm text-foreground", className)}
      {...props}
    >
      <Icon aria-hidden="true" className={cn("size-4 shrink-0", tone === "error" && "text-destructive")} />
      <p className="m-0 min-w-0 flex-1">
        <span className="sr-only">{LABEL[tone]}: </span>
        {title && <span className="font-medium">{title} </span>}
        <span className="text-foreground/70">{children}</span>
      </p>
      {action && <div className="shrink-0">{action}</div>}
      {onDismiss && (
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          aria-label={dismissLabel}
          onClick={() => {
            setDismissed(true);
            onDismiss();
          }}
          className="-mr-1.5 shrink-0 rounded-full"
        >
          <XIcon aria-hidden="true" />
        </Button>
      )}
    </div>
  );
}