import type { CSSProperties, ReactNode } from 'react';

/**
 * Base Drawer public API.
 *
 * Wraps `@base-ui/react/drawer` (same primitive family as Dialog / Input).
 * Default behavior is a full-viewport drawer portalled to `document.body`
 * (`position: fixed`). Pass `position="absolute"` to render in place so the
 * nearest positioned ancestor can contain it (avoids z-index fights when the
 * drawer lives inside another modal).
 */
export type DrawerSwipeDirection = 'up' | 'down' | 'left' | 'right';

export type DrawerPosition = 'fixed' | 'absolute';

export interface DrawerProps {
  /** Controlled open state. Omit to use uncontrolled mode with `defaultOpen`. */
  open?: boolean;
  /** Default open state when uncontrolled. @default false */
  defaultOpen?: boolean;
  /**
   * Positioning strategy.
   * - `fixed` (default): overlay and content use `position: fixed`, portalled
   *   to `document.body`.
   * - `absolute`: overlay and content use `position: absolute`, rendered in
   *   place. The nearest positioned ancestor should have `position: relative`.
   * @default 'fixed'
   */
  position?: DrawerPosition;
  /**
   * Swipe direction that dismisses the drawer. The drawer slides in from the
   * opposite edge (`down` = slides up from the bottom).
   * @default 'down'
   */
  swipeDirection?: DrawerSwipeDirection;
  /** Whether interaction outside the drawer is blocked. @default true */
  modal?: boolean;
  /** Show the built-in header (title + close button). @default true */
  showHeader?: boolean;
  /** Drawer title text (shown when `showHeader` is true and no `header` is provided). */
  title?: ReactNode;
  /** Show the built-in close button in the header. @default true */
  showClose?: boolean;
  /** Aria label for the close button. */
  closeAriaLabel?: string;
  /** Show a dimmed overlay behind the drawer. @default true */
  showOverlay?: boolean;
  /**
   * Drawer size along its swipe axis. Vertical directions map to height;
   * horizontal directions map to width.
   * @default '80dvh' (vertical) / 'min(80%, 320px)' (horizontal)
   */
  size?: string;
  className?: string;
  overlayClassName?: string;
  contentClassName?: string;
  style?: CSSProperties;
  children?: ReactNode;
  header?: ReactNode;
  footer?: ReactNode;
  onOpenChange?: (open: boolean) => void;
  onClose?: () => void;
}