Bottom Sheet

"use client";

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

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

export const BottomSheetClose = Dialog.Close;

/** Mobile-style bottom sheet (Radix Dialog): frosted panel sliding up from the bottom with a grab handle; centered card on wide screens. */
export function BottomSheet({ trigger, open, defaultOpen, onOpenChange, title, description, children, da = "glass", className }: BottomSheetProps) {
  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 bg-none backdrop-blur-sm transition-opacity duration-(--da-duration) starting:opacity-0 motion-reduce:transition-none"
        />
        <Dialog.Content
          data-da={da}
          className={cn(
            "da-stroke fixed inset-x-0 bottom-0 z-50 max-h-[85dvh] overflow-y-auto rounded-t-da-lg bg-da-surface bg-none px-5 pt-3 pb-8 text-da-surface-fg shadow-da-lg outline-none backdrop-blur-[40px] backdrop-saturate-150",
            "transition-[translate,opacity] duration-(--da-duration-slow) ease-da-emphasized starting:translate-y-full motion-reduce:transition-none",
            "sm:bottom-6 sm:left-1/2 sm:w-full sm:max-w-md sm:-translate-x-1/2 sm:rounded-da-lg sm:starting:translate-y-8 sm:starting:opacity-0",
            className,
          )}
        >
          <div aria-hidden className="mx-auto mb-4 h-1.5 w-10 rounded-full bg-da-fg/20" />
          <Dialog.Title className="font-da-display text-lg font-semibold tracking-da-display">{title}</Dialog.Title>
          {description ? (
            <Dialog.Description className="mt-1 text-sm text-da-muted-fg">{description}</Dialog.Description>
          ) : (
            <Dialog.Description className="sr-only">{title}</Dialog.Description>
          )}
          <div className="mt-5">{children}</div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default BottomSheet;