import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "./sheet";

export default function SheetDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <Sheet>
        <SheetTrigger className="inline-flex items-center justify-center rounded-base border-2 border-border bg-main px-4 py-2 text-sm font-base text-main-foreground shadow-shadow hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none">
          Open Sheet
        </SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Edit Profile</SheetTitle>
            <SheetDescription>
              Make changes to your profile here. Click save when you&apos;re done.
            </SheetDescription>
          </SheetHeader>
          <div className="py-4 space-y-3 px-4">
            <input
              className="w-full rounded-base border-2 border-border bg-secondary-background px-3 py-2 text-sm font-base"
              placeholder="Name"
              defaultValue="John Doe"
            />
            <input
              className="w-full rounded-base border-2 border-border bg-secondary-background px-3 py-2 text-sm font-base"
              placeholder="Email"
              defaultValue="john@example.com"
            />
          </div>
        </SheetContent>
      </Sheet>
    </div>
  );
}