"use client";

import { Drawer } from "vaul";
import { cn } from "@area/foundation";
import { type ReactNode } from "react";

interface BottomSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  trigger?: ReactNode;
  title?: ReactNode;
  description?: ReactNode;
  children: ReactNode;
  /** Optional snap points (0..1). E.g. [0.4, 0.8, 1]. */
  snapPoints?: (string | number)[];
  className?: string;
}

/**
 * Mobile-first bottom sheet. Always renders as a sheet — no breakpoint switching.
 * For "sheet on mobile, dialog on desktop", use ResponsiveDialog instead.
 */
export function BottomSheet({
  open,
  onOpenChange,
  trigger,
  title,
  description,
  children,
  snapPoints,
  className,
}: BottomSheetProps) {
  return (
    <Drawer.Root
      open={open}
      onOpenChange={onOpenChange}
      {...(snapPoints !== undefined ? { snapPoints } : {})}
    >
      {trigger && <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>}
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 z-50 bg-black/40" />
        <Drawer.Content
          className={cn(
            "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto flex-col rounded-t-2xl bg-background pb-safe",
            className,
          )}
        >
          <div className="mx-auto mt-3 h-1.5 w-12 rounded-full bg-muted" />
          <div className="px-6 py-5">
            {title && (
              <Drawer.Title className="text-lg font-semibold tracking-tight">{title}</Drawer.Title>
            )}
            {description && (
              <Drawer.Description className="mt-1 text-sm text-muted-foreground">
                {description}
              </Drawer.Description>
            )}
            <div className="mt-4">{children}</div>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}