import * as RD from '@radix-ui/react-dialog';
import { X } from 'lucide-react';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

export function Dialog({ open, onOpenChange, title, children, className, description }: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  title: string;
  description?: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <RD.Root open={open} onOpenChange={onOpenChange}>
      <RD.Portal>
        <RD.Overlay className="fixed inset-0 z-40 bg-uqo-blue-dark/40 backdrop-blur-[2px] animate-fadein" />
        <RD.Content
          className={cn(
            'fixed z-50 bg-white shadow-card focus:outline-none',
            'inset-x-0 bottom-0 rounded-t-2xl max-h-[92dvh] overflow-y-auto pb-[var(--safe-bottom)]',
            'sm:inset-auto sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:w-[min(92vw,560px)] sm:rounded-2xl sm:max-h-[85vh]',
            className,
          )}
        >
          <div className="sticky top-0 flex items-center justify-between gap-3 border-b border-neutral-line bg-white px-5 py-3 rounded-t-2xl">
            <div>
              <RD.Title className="text-lg font-semibold text-uqo-blue-dark">{title}</RD.Title>
              {description && <RD.Description className="text-sm text-neutral-muted">{description}</RD.Description>}
            </div>
            <RD.Close className="h-11 w-11 inline-flex items-center justify-center rounded-xl hover:bg-neutral-surface" aria-label="Fermer">
              <X size={20} />
            </RD.Close>
          </div>
          <div className="px-5 py-4">{children}</div>
        </RD.Content>
      </RD.Portal>
    </RD.Root>
  );
}