Alert Dialog

import { AlertDialog, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "@/components/ui/alert-dialog";

export default function Example() {
  return <AlertDialog />;
}

"use client";

import { forwardRef, useEffect } from "react";
import { cn } from "@/lib/utils";

const AlertDialog = forwardRef(({ className, open, onClose, children, ...props }, ref) => {
  useEffect(() => {
    if (open) document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm" />
      <div ref={ref} role="alertdialog" className={cn("relative z-50 w-full max-w-md rounded-lg border bg-background p-6 shadow-lg animate-in fade-in-0 zoom-in-95", className)} {...props}>
        {children}
      </div>
    </div>
  );
});
AlertDialog.displayName = "AlertDialog";

const AlertDialogTitle = forwardRef(({ className, ...props }, ref) => (
  <h2 ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
));
AlertDialogTitle.displayName = "AlertDialogTitle";

const AlertDialogDescription = forwardRef(({ className, ...props }, ref) => (
  <p ref={ref} className={cn("mt-2 text-sm text-muted-foreground", className)} {...props} />
));
AlertDialogDescription.displayName = "AlertDialogDescription";

const AlertDialogFooter = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("mt-4 flex justify-end gap-2", className)} {...props} />
));
AlertDialogFooter.displayName = "AlertDialogFooter";

const AlertDialogCancel = forwardRef(({ className, ...props }, ref) => (
  <button ref={ref} className={cn("inline-flex h-10 items-center justify-center rounded-md border px-4 py-2 text-sm font-medium transition-colors hover:bg-accent", className)} {...props} />
));
AlertDialogCancel.displayName = "AlertDialogCancel";

const AlertDialogAction = forwardRef(({ className, ...props }, ref) => (
  <button ref={ref} className={cn("inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90", className)} {...props} />
));
AlertDialogAction.displayName = "AlertDialogAction";

export { AlertDialog, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction };