Alert

"use client";

import * as React from "react";
import { AnimatePresence, motion } from "motion/react";
import { AlertTriangle, CheckCircle2, Info, OctagonAlert, X } from "lucide-react";
import { cn } from "@/lib/utils";

const tones = {
  info: { icon: <Info />, cls: "border-sky-500/30 bg-sky-500/6 [&>svg]:text-sky-500" },
  success: { icon: <CheckCircle2 />, cls: "border-emerald-500/30 bg-emerald-500/6 [&>svg]:text-emerald-500" },
  warning: { icon: <AlertTriangle />, cls: "border-amber-500/35 bg-amber-500/7 [&>svg]:text-amber-500" },
  danger: { icon: <OctagonAlert />, cls: "border-destructive/35 bg-destructive/6 [&>svg]:text-destructive" },
  neutral: { icon: <Info />, cls: "border-border bg-muted/40 [&>svg]:text-muted-foreground" },
};

export interface AlertProps {
  tone?: keyof typeof tones;
  title: React.ReactNode;
  children?: React.ReactNode;
  action?: React.ReactNode;
  /** Shows a close button; the alert animates out. */
  dismissible?: boolean;
  onDismiss?: () => void;
  /** "inline" for content, "banner" for a full-width strip at the top of a page. */
  variant?: "inline" | "banner";
  className?: string;
}

export function Alert({ tone = "info", title, children, action, dismissible, onDismiss, variant = "inline", className }: AlertProps) {
  const [open, setOpen] = React.useState(true);
  const t = tones[tone];
  return (
    <AnimatePresence initial={false}>
      {open && (
        <motion.div
          role={tone === "danger" || tone === "warning" ? "alert" : "status"}
          exit={{ opacity: 0, height: 0, marginTop: 0, marginBottom: 0 }}
          transition={{ duration: 0.2 }}
          className={cn(
            "relative flex items-start gap-3 overflow-hidden border text-sm [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
            variant === "inline" ? "rounded-lg p-3.5" : "border-x-0 px-4 py-2.5 sm:items-center",
            t.cls,
            dismissible && "pr-10",
            className,
          )}
        >
          {t.icon}
          <div className={cn("min-w-0 flex-1", variant === "banner" && "sm:flex sm:items-center sm:gap-2")}>
            <p className="font-medium">{title}</p>
            {children && <div className={cn("text-muted-foreground", variant === "inline" && "mt-0.5")}>{children}</div>}
          </div>
          {action && <div className="shrink-0">{action}</div>}
          {dismissible && (
            <button
              type="button"
              aria-label="Dismiss"
              onClick={() => {
                setOpen(false);
                onDismiss?.();
              }}
              className="absolute right-2 top-2.5 grid size-6 place-items-center rounded text-muted-foreground hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10"
            >
              <X className="size-3.5" />
            </button>
          )}
        </motion.div>
      )}
    </AnimatePresence>
  );
}