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?: string;
  className?: string;
}

export const BottomSheetClose = Dialog.Close;

/** Bottom sheet (Radix Dialog): slides up from the bottom with a grab handle and very rounded top corners; becomes a centered card from sm up. */
export function BottomSheet({ trigger, open, defaultOpen, onOpenChange, title, description, children, da = "organic-soft", 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 backdrop-blur-[2px] transition-opacity duration-(--da-duration) starting:opacity-0 motion-reduce:transition-none"
        />
        <Dialog.Content
          data-da={da}
          className={cn(
            "fixed inset-x-0 bottom-0 z-50 max-h-[85dvh] overflow-y-auto rounded-t-[2rem] bg-da-surface px-6 pt-3 pb-8 text-da-surface-fg shadow-da-lg outline-none transition-transform duration-(--da-duration-slow) ease-da starting:translate-y-full motion-reduce:transition-none",
            "sm:inset-x-auto sm:bottom-auto sm:top-1/2 sm:left-1/2 sm:w-full sm:max-w-md sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-da-lg sm:pt-8 sm:starting:translate-y-[-40%] sm:starting:opacity-0 sm:transition-[opacity,translate]",
            className,
          )}
        >
          <span aria-hidden className="mx-auto mb-5 block h-1.5 w-12 rounded-full bg-da-border-strong sm:hidden" />
          <Dialog.Title className="font-da-display text-2xl">{title}</Dialog.Title>
          {description ? (
            <Dialog.Description className="mt-1.5 text-da-muted-fg">{description}</Dialog.Description>
          ) : (
            <Dialog.Description className="sr-only">{title}</Dialog.Description>
          )}
          <div className="mt-6">{children}</div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default BottomSheet;