Sheet

"use client";

import { X } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

/**
 * Live Sheet example — a Sheet is a Dialog attached to a screen edge, so the
 * focus trap, `Escape` / overlay-click dismissal, focus restoration, and
 * action ordering all behave exactly as Dialog's do.
 *
 *  - Right (default): a desktop-style secondary panel, full height, capped
 *    width. Rounded on its left corners only; the right edge is flush.
 *  - Bottom: a mobile-style bottom sheet, full width, capped height (never the
 *    full viewport) — its body scrolls. No drag handle: this component doesn't
 *    implement swipe-to-dismiss, so it doesn't show an affordance for one.
 *  - Right, unsaved changes: `dismissible={false}`, so an accidental overlay
 *    click can't discard the edits — Cancel and `Escape` remain.
 */
export function SheetShowcase() {
  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Right (default) — a filters panel
        </h3>
        <Sheet>
          <SheetTrigger>
            <Button variant="outline">Open filters</Button>
          </SheetTrigger>
          <SheetContent>
            <SheetHeader>
              <SheetTitle>Filters</SheetTitle>
              <SheetDescription>
                Narrow the list without leaving the page behind it.
              </SheetDescription>
              <SheetClose>
                <Button
                  variant="ghost"
                  size="icon"
                  aria-label="Close"
                  className="absolute right-4 top-4"
                >
                  <X />
                </Button>
              </SheetClose>
            </SheetHeader>
            <SheetBody>
              <div className="flex flex-col gap-4">
                <div className="flex flex-col gap-2">
                  <Label htmlFor="filter-owner">Owner</Label>
                  <Input id="filter-owner" placeholder="Anyone" />
                </div>
                <div className="flex flex-col gap-2">
                  <Label htmlFor="filter-label">Label</Label>
                  <Input id="filter-label" placeholder="Any label" />
                </div>
              </div>
            </SheetBody>
            <SheetFooter>
              <SheetClose>
                <Button variant="ghost">Reset</Button>
              </SheetClose>
              <SheetClose>
                <Button>Apply</Button>
              </SheetClose>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Bottom — a mobile-style sheet
        </h3>
        <Sheet>
          <SheetTrigger>
            <Button variant="outline">Choose a plan</Button>
          </SheetTrigger>
          <SheetContent side="bottom">
            <SheetHeader>
              <SheetTitle>Choose a plan</SheetTitle>
              <SheetDescription>
                The sheet is capped below the full viewport height; this list
                scrolls inside it.
              </SheetDescription>
            </SheetHeader>
            <SheetBody>
              <ul className="flex flex-col gap-3">
                {Array.from({ length: 10 }, (_, i) => (
                  <li
                    key={i}
                    className="rounded-md border-[length:var(--scale-px)] border-solid border-border p-3"
                  >
                    Plan tier {i + 1} — a short description of what this tier
                    includes and who it suits.
                  </li>
                ))}
              </ul>
            </SheetBody>
            <SheetFooter>
              <SheetClose>
                <Button variant="ghost">Not now</Button>
              </SheetClose>
              <SheetClose>
                <Button>Continue</Button>
              </SheetClose>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Right, unsaved changes — overlay-click disabled
        </h3>
        <Sheet dismissible={false}>
          <SheetTrigger>
            <Button variant="outline">Edit profile</Button>
          </SheetTrigger>
          <SheetContent>
            <SheetHeader>
              <SheetTitle>Edit profile</SheetTitle>
              <SheetDescription>
                Changes here aren’t saved until you choose Save.
              </SheetDescription>
            </SheetHeader>
            <SheetBody>
              <div className="flex flex-col gap-4">
                <div className="flex flex-col gap-2">
                  <Label htmlFor="profile-name">Display name</Label>
                  <Input id="profile-name" defaultValue="Ada Lovelace" />
                </div>
                <div className="flex flex-col gap-2">
                  <Label htmlFor="profile-title">Title</Label>
                  <Input id="profile-title" defaultValue="Mathematician" />
                </div>
              </div>
            </SheetBody>
            <SheetFooter>
              <SheetClose>
                <Button variant="ghost">Cancel</Button>
              </SheetClose>
              <SheetClose>
                <Button>Save</Button>
              </SheetClose>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      </section>
    </div>
  );
}