"use client";
import * as React from "react";
import * as D from "@radix-ui/react-dialog";
import { AnimatePresence, motion } from "motion/react";
import { XIcon } from "@phosphor-icons/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const SheetCtx = React.createContext(false);

/** Same API as Radix Dialog, shown as a side sheet. */
export function Sheet({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps<typeof D.Root>) {
  const [inner, setInner] = React.useState(defaultOpen ?? false);
  const current = open ?? inner;
  return (
    <SheetCtx.Provider value={current}>
      <D.Root
        open={current}
        onOpenChange={(v) => {
          setInner(v);
          onOpenChange?.(v);
        }}
        {...p}
      />
    </SheetCtx.Provider>
  );
}
export const SheetTrigger = D.Trigger;
export const SheetClose = D.Close;

type Side = "top" | "right" | "bottom" | "left";
const sides: Record<Side, { className: string; hidden: { x?: string; y?: string } }> = {
  top: { className: "inset-x-3 top-3 max-h-[85vh]", hidden: { y: "-110%" } },
  bottom: { className: "inset-x-3 bottom-3 max-h-[85vh]", hidden: { y: "110%" } },
  left: { className: "inset-y-3 left-3 w-[min(24rem,calc(100vw-1.5rem))]", hidden: { x: "-110%" } },
  right: { className: "inset-y-3 right-3 w-[min(24rem,calc(100vw-1.5rem))]", hidden: { x: "110%" } },
};

export function SheetContent({ className, children, side = "right", ...p }: React.ComponentProps<typeof D.Content> & { side?: Side }) {
  const open = React.useContext(SheetCtx);
  const s = sides[side];
  return (
    <AnimatePresence>
      {open && (
        <D.Portal forceMount>
          <D.Overlay asChild forceMount>
            <motion.div
              className="fixed inset-0 z-50 bg-overlay backdrop-blur-sm"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
            />
          </D.Overlay>
          <D.Content asChild forceMount {...p}>
            <motion.div
              className={cn("fixed z-50 flex flex-col gap-4 overflow-y-auto rounded-xl bg-surface p-6 text-on-surface shadow-clay outline-none", s.className, className)}
              initial={s.hidden}
              animate={{ x: 0, y: 0 }}
              exit={{ ...s.hidden, transition: { duration: 0.2, ease: "easeIn" } }}
              transition={springs.gentle}
            >
              {children}
              <D.Close
                className="absolute right-4 top-4 grid size-8 cursor-pointer place-items-center rounded-full bg-surface-sunken font-bold shadow-clay-sm transition-transform hover:rotate-90 hover:bg-background"
                aria-label="Close"
              >
                <XIcon weight="bold" className="size-4" aria-hidden />
              </D.Close>
            </motion.div>
          </D.Content>
        </D.Portal>
      )}
    </AnimatePresence>
  );
}
export function SheetHeader({ className, ...p }: React.ComponentProps<"div">) {
  return <div className={cn("flex flex-col gap-1 pr-10", className)} {...p} />;
}
export function SheetFooter({ className, ...p }: React.ComponentProps<"div">) {
  return <div className={cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...p} />;
}
export function SheetTitle({ className, ...p }: React.ComponentProps<typeof D.Title>) {
  return <D.Title className={cn("text-xl font-extrabold tracking-tight", className)} {...p} />;
}
export function SheetDescription({ className, ...p }: React.ComponentProps<typeof D.Description>) {
  return <D.Description className={cn("text-sm font-medium text-on-surface-muted", className)} {...p} />;
}
Installation
