import * as React from "react"
import { Button } from "@/registry/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/registry/ui/dialog"
import { GlassStage } from "./_shared/glass-stage"

export default function DialogDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      {/* Always-visible glass exhibit */}
      <GlassStage>
        {/* static replica of DialogContent 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">Are you sure?</p>
            <p className="text-sm text-muted-foreground">
              This action cannot be undone.
            </p>
          </div>
          <div className="mt-4 flex justify-end gap-2">
            <Button variant="outline" size="sm">Cancel</Button>
            <Button size="sm">Confirm</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">
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="outline">Open dialog</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Are you sure?</DialogTitle>
              <DialogDescription>This action cannot be undone.</DialogDescription>
            </DialogHeader>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}