import * as Dialog from '@radix-ui/react-dialog';
import type { ReactNode } from 'react';

/** Modale au style de la maquette, portée par Radix (focus, Échap, overlay). */
export function Modale({
  titre,
  ouverte,
  surFermeture,
  children,
}: {
  titre: string;
  ouverte: boolean;
  surFermeture: (ouverte: boolean) => void;
  children: ReactNode;
}) {
  return (
    <Dialog.Root open={ouverte} onOpenChange={surFermeture}>
      <Dialog.Portal>
        <Dialog.Overlay className="voile-radix" />
        <Dialog.Content className="modale" aria-describedby={undefined}>
          <Dialog.Title asChild>
            <h3>{titre}</h3>
          </Dialog.Title>
          {children}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}