Alert

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

const INTENTS = ["default", "info", "success", "warning", "destructive"] as const;

/**
 * Live Alert example — Alert is a server component (no client JS). Shows the
 * five intents with their per-intent icon and visually hidden intent word, a
 * title-only alert, an icon-free alert, and the caller-owned `role` for a
 * dynamically shown message (Alert sets no role itself).
 */
export function AlertShowcase() {
  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Intents
        </h3>
        <div className="flex flex-col gap-3">
          {INTENTS.map((intent) => (
            <Alert key={intent} intent={intent}>
              <AlertTitle>
                {intent[0].toUpperCase() + intent.slice(1)} alert
              </AlertTitle>
              <AlertDescription>
                A short sentence explaining what happened and what, if anything,
                to do next.
              </AlertDescription>
            </Alert>
          ))}
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Title only
        </h3>
        <Alert intent="success">
          <AlertTitle>Your changes have been saved.</AlertTitle>
        </Alert>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          No icon
        </h3>
        <Alert intent="info" icon={null}>
          <AlertTitle>Scheduled maintenance</AlertTitle>
          <AlertDescription>
            The dashboard will be read-only on Sunday from 02:00–03:00 UTC.
          </AlertDescription>
        </Alert>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Dynamically shown — caller adds the live-region role
        </h3>
        <Alert intent="destructive" role="alert">
          <AlertTitle>Payment failed</AlertTitle>
          <AlertDescription>
            We couldn&rsquo;t charge your card. Update your payment method and
            try again.
          </AlertDescription>
        </Alert>
      </section>
    </div>
  );
}