Drawer

"use client";

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

export interface DrawerProps {
  trigger?: ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  title: string;
  label?: string;
  children?: ReactNode;
  footer?: ReactNode;
  da?: string;
  className?: string;
}

export const DrawerClose = Dialog.Close;

/** Right side panel (Radix Dialog) sliding in over a dimmed page: mono top bar with label and “Close”, large title, scrollable body with ruled rows and a sticky footer. */
export function Drawer({ trigger, open, defaultOpen, onOpenChange, title, label = "Details", children, footer, da = "mono-clean", className }: DrawerProps) {
  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 right-0 z-50 flex w-full max-w-md flex-col border-l border-da-border-strong bg-da-surface text-da-surface-fg outline-none transition-transform duration-(--da-duration-slow) ease-da starting:translate-x-full motion-reduce:transition-none",
            className,
          )}
        >
          <div className="flex items-center justify-between border-b border-da-border px-6 py-3 font-da-mono text-[11px] tracking-da-label uppercase">
            <span className="text-da-muted-fg">{label}</span>
            <Dialog.Close className="da-focus rounded-da-sm hover:underline">Close</Dialog.Close>
          </div>
          <Dialog.Title className="px-6 pt-6 font-da-display text-3xl font-medium tracking-da-display">{title}</Dialog.Title>
          <Dialog.Description className="sr-only">{title}</Dialog.Description>
          <div className="flex-1 overflow-y-auto px-6 py-6">{children}</div>
          {footer && <div className="flex gap-3 border-t border-da-border px-6 py-4 [&>*]:flex-1">{footer}</div>}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default Drawer;