Sheet

"use client";

import type { ReactNode } from "react";
import { Dialog } from "radix-ui";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SheetProps {
  trigger?: ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  title: string;
  description?: string;
  side?: "right" | "left";
  children?: ReactNode;
  footer?: ReactNode;
  /** DA scope re-applied inside the portal. */
  da?: string;
  className?: string;
}

export const SheetClose = Dialog.Close;

/** Side panel (Radix Dialog) sliding from the right or left: sticky header, scrollable body, footer actions. */
export function Sheet({
  trigger,
  open,
  defaultOpen,
  onOpenChange,
  title,
  description,
  side = "right",
  children,
  footer,
  da = "minimal",
  className,
}: SheetProps) {
  return (
    <Dialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
      <Dialog.Portal>
        <Dialog.Overlay
          data-da={da}
          className="fixed inset-0 z-50 bg-da-overlay transition-opacity duration-(--da-duration) starting:opacity-0 motion-reduce:transition-none"
        />
        <Dialog.Content
          data-da={da}
          className={cn(
            "fixed inset-y-0 z-50 flex w-full max-w-md flex-col bg-da-surface text-da-surface-fg shadow-da-lg outline-none",
            "transition-[translate] duration-(--da-duration-slow) ease-da motion-reduce:transition-none",
            side === "right" ? "right-0 border-l border-da-border starting:translate-x-full" : "left-0 border-r border-da-border starting:-translate-x-full",
            className,
          )}
        >
          <div className="flex items-start gap-4 border-b border-da-border px-5 py-4">
            <div className="min-w-0 flex-1">
              <Dialog.Title className="text-[15px] font-semibold tracking-tight">{title}</Dialog.Title>
              {description ? (
                <Dialog.Description className="mt-1 text-[13px] text-da-muted-fg">{description}</Dialog.Description>
              ) : (
                <Dialog.Description className="sr-only">{title}</Dialog.Description>
              )}
            </div>
            <Dialog.Close
              aria-label="Close"
              className="da-focus da-transition grid size-7 place-items-center rounded-da-sm text-da-muted-fg hover:bg-da-muted hover:text-da-fg"
            >
              <X aria-hidden className="size-4" />
            </Dialog.Close>
          </div>
          <div className="flex-1 overflow-y-auto px-5 py-5">{children}</div>
          {footer && <div className="flex justify-end gap-2 border-t border-da-border bg-da-surface-2/60 px-5 py-3">{footer}</div>}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default Sheet;