import * as React from "react"
import { Button } from "@/registry/ui/button"
import { Input } from "@/registry/ui/input"
import { Label } from "@/registry/ui/label"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/registry/ui/sheet"
import { GlassStage } from "./_shared/glass-stage"

export default function SheetDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      {/* Always-visible glass exhibit */}
      <GlassStage>
        {/* static replica of SheetContent material classes — keep in sync */}
        <div className="w-full max-w-sm rounded-md border border-l border-material-border bg-material-thick shadow-xl backdrop-blur-xl backdrop-saturate-150 flex flex-col gap-4 p-0 overflow-hidden">
          <div className="flex flex-col gap-1.5 p-4 pb-0">
            <p className="font-semibold text-foreground">Edit profile</p>
            <p className="text-sm text-muted-foreground">
              Update your profile details. Click save when you&apos;re done.
            </p>
          </div>
          <div className="px-4">
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="exhibit-name">Display name</Label>
              <Input id="exhibit-name" defaultValue="Alex Johnson" />
            </div>
          </div>
          <div className="mt-auto flex flex-col gap-2 p-4 pt-0">
            <Button type="submit">Save changes</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">
        <Sheet>
          <SheetTrigger asChild>
            <Button variant="outline">Edit profile</Button>
          </SheetTrigger>
          <SheetContent side="right">
            <SheetHeader>
              <SheetTitle>Edit profile</SheetTitle>
              <SheetDescription>
                Update your profile details. Click save when you&apos;re done.
              </SheetDescription>
            </SheetHeader>
            <div className="px-4">
              <div className="flex flex-col gap-1.5">
                <Label htmlFor="name">Display name</Label>
                <Input id="name" defaultValue="Alex Johnson" />
              </div>
            </div>
            <SheetFooter>
              <Button type="submit">Save changes</Button>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      </div>
    </div>
  )
}