Notice card

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" | "warning" | "error" | "success";

type NoticeCardProps = Omit<React.ComponentProps<"div">, "title"> & {
  /** Picks the icon and the sr-only prefix. Monochrome: the icon and title carry the meaning. */
  tone?: Tone;
  /** The first line. */
  title: string;
  /** The body, under the title. */
  children?: React.ReactNode;
  /** One action under the body, usually a ghost sm Button. */
  action?: React.ReactNode;
  /** Shows a dismiss button top right and is called when it is pressed. */
  onDismiss?: () => void;
  /** Accessible name of the dismiss button. */
  dismissLabel?: string;
};

const TONE_ICON = {
  info: InfoIcon,
  warning: TriangleAlertIcon,
  error: CircleAlertIcon,
  success: CircleCheckIcon,
} as const;

const TONE_TEXT = { info: "Info", warning: "Warning", error: "Error", success: "Success" } as const;

/**
 * An inline notice: icon, title, body, an optional action and a dismiss button.
 * All four tones are monochrome; the icon and the title say which one it is.
 */
export function NoticeCard({
  tone = "info",
  title,
  children,
  action,
  onDismiss,
  dismissLabel = "Dismiss",
  className,
  ...props
}: NoticeCardProps) {
  const Icon = TONE_ICON[tone];
  return (
    <div
      data-slot="notice-card"
      data-tone={tone}
      className={cn("flex items-start gap-3 rounded-lg border bg-card p-4 text-sm", className)}
      {...props}
    >
      <Icon aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-foreground" />
      <div className="flex min-w-0 flex-1 flex-col gap-1">
        <p className="m-0 font-medium text-foreground">
          <span className="sr-only">{TONE_TEXT[tone]}: </span>
          {title}
        </p>
        {children && <div className="text-muted-foreground">{children}</div>}
        {action && <div className="mt-1 -ml-2.5 flex">{action}</div>}
      </div>
      {onDismiss && (
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          aria-label={dismissLabel}
          onClick={onDismiss}
          className="-my-1 -mr-1.5 shrink-0 rounded-full text-muted-foreground"
        >
          <XIcon aria-hidden="true" />
        </Button>
      )}
    </div>
  );
}