import { type ReactNode } from "react";
import * as RadixDialog from "@radix-ui/react-dialog";
import { cx } from "./utils";
import { Icon } from "./Icon";

export type DrawerProps = {
  open: boolean;
  /** Callback de fermeture — déclenché par Esc, click backdrop, click close. */
  onClose: () => void;
  /** Côté d'apparition. Défaut "right". */
  side?: "left" | "right";
  /** Largeur. Défaut "md" (480px). */
  size?: "sm" | "md" | "lg" | "xl";
  title?: ReactNode;
  children: ReactNode;
  footer?: ReactNode;
  className?: string;
};

/**
 * Drawer — panneau latéral (Radix Dialog).
 *
 * API simplifiée par rapport à Sheet : uniquement left/right, callback
 * `onClose` (au lieu de `onOpenChange`). Pour bottom/top sheet ou plus
 * de contrôle, utiliser directement Sheet.
 *
 * Backing Radix : focus trap, scroll lock, restitution focus, Esc — tout
 * natif. Anciennement custom (useFocusTrap), maintenant aligné avec Sheet.
 */
export function Drawer({
  open,
  onClose,
  side = "right",
  size = "md",
  title,
  children,
  footer,
  className,
}: DrawerProps) {
  return (
    <RadixDialog.Root open={open} onOpenChange={(o) => !o && onClose()}>
      <RadixDialog.Portal>
        <RadixDialog.Overlay className="mmg-sheet__overlay" />
        <RadixDialog.Content
          className={cx(
            "mmg-sheet",
            `mmg-sheet--${side}`,
            `mmg-sheet--${size}`,
            "mmg-drawer",
            className,
          )}
        >
          {title && (
            <header className="mmg-sheet__header">
              <div className="mmg-sheet__header-text">
                <RadixDialog.Title className="mmg-sheet__title">{title}</RadixDialog.Title>
              </div>
              <RadixDialog.Close asChild>
                <button type="button" className="mmg-sheet__close" aria-label="Fermer">
                  <Icon name="close-line" size="md" />
                </button>
              </RadixDialog.Close>
            </header>
          )}
          <div className="mmg-sheet__body">{children}</div>
          {footer && <footer className="mmg-sheet__footer">{footer}</footer>}
        </RadixDialog.Content>
      </RadixDialog.Portal>
    </RadixDialog.Root>
  );
}