Sheet

"use client";

import type * as React from "react";
import { Drawer } from "vaul";
import { cn } from "@/lib/ledger/cn";
import { XMarkIcon } from "@/components/ledger/icons";

export interface SheetProps {
  children: React.ReactNode;
  description?: string;
  footer?: React.ReactNode;
  onOpenChange: (open: boolean) => void;
  open: boolean;
  side?: "bottom" | "right";
  /** Partial heights. The first is the resting snap. */
  snapPoints?: (number | string)[];
  title: string;
}

/**
 * The primary overlay on phone — a sheet enters from the thumb zone, where
 * a centred dialog puts its actions in the middle of the screen.
 *
 * 320ms ease-drawer in, 225ms out, 1:1 finger tracking with velocity-aware
 * dismissal handled by Vaul. The footer pads to the safe area.
 */
export function Sheet({
  open,
  onOpenChange,
  title,
  description,
  children,
  footer,
  snapPoints,
  side = "bottom",
}: SheetProps) {
  return (
    <Drawer.Root direction={side} onOpenChange={onOpenChange} open={open} snapPoints={snapPoints}>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 z-overlay bg-[oklch(0.21_0.02_265/0.4)]" />
        <Drawer.Content
          className={cn(
            "fixed z-dialog flex flex-col bg-surface-raised outline-none",
            side === "bottom"
              ? "inset-x-0 bottom-0 max-h-[92dvh] rounded-t-xl border-t border-border"
              : "inset-y-0 right-0 h-dvh w-full max-w-[480px] border-l border-border",
          )}
          style={{ overscrollBehavior: "contain" }}
        >
          {side === "bottom" ? (
            <div
              aria-hidden="true"
              className="mx-auto mt-3 h-1 w-10 shrink-0 rounded-full bg-border-strong"
            />
          ) : null}
          <div className="flex items-start justify-between gap-4 px-6 pb-4 pt-5">
            <div>
              <Drawer.Title className="text-title-md font-medium">{title}</Drawer.Title>
              {description ? (
                <Drawer.Description className="mt-1 text-body text-text-secondary">
                  {description}
                </Drawer.Description>
              ) : (
                <Drawer.Description className="sr-only">{title}</Drawer.Description>
              )}
            </div>
            <button
              aria-label="Close"
              className="press grid size-8 place-items-center rounded-sm text-text-tertiary hover:bg-surface-hover"
              onClick={() => onOpenChange(false)}
              type="button"
            >
              <XMarkIcon aria-hidden="true" className="size-4" />
            </button>
          </div>
          <div className="flex-1 overflow-y-auto px-6 pb-6 scrollbar-thin">{children}</div>
          {footer ? (
            <div
              className="border-t border-border-subtle px-6 pt-4"
              style={{ paddingBottom: "max(24px, env(safe-area-inset-bottom))" }}
            >
              {footer}
            </div>
          ) : null}
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}