import * as React from "react"
import { Button } from "@/registry/ui/button"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/registry/ui/alert-dialog"
import { GlassStage } from "./_shared/glass-stage"

export default function AlertDialogDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      {/* Always-visible glass exhibit */}
      <GlassStage>
        {/* static replica of AlertDialogContent material classes — keep in sync */}
        <div className="w-full max-w-sm rounded-lg border border-material-border bg-material-thick p-6 shadow-xl backdrop-blur-xl backdrop-saturate-150">
          <div className="flex flex-col gap-2">
            <p className="text-lg leading-none font-semibold">Delete this service?</p>
            <p className="text-sm text-muted-foreground">
              This action cannot be undone. All data associated with this service
              will be permanently removed.
            </p>
          </div>
          <div className="mt-4 flex justify-end gap-2">
            <Button variant="outline" size="sm">Cancel</Button>
            <Button variant="destructive" size="sm">Delete</Button>
          </div>
        </div>
      </GlassStage>

      {/* Interactive demo */}
      <p className="text-xs text-muted-foreground text-center">Try it live</p>
      <div className="flex items-center justify-center">
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button variant="outline">Delete service</Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Delete this service?</AlertDialogTitle>
              <AlertDialogDescription>
                This action cannot be undone. All data associated with this service
                will be permanently removed.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancel</AlertDialogCancel>
              <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </div>
    </div>
  )
}