import React from 'react';
import { createPortal } from 'react-dom';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { useOverlayDismiss } from '../../hooks/useOverlayDismiss';

type ModalSize = 'sm' | 'md' | 'lg' | 'xl';

const sizeMap: Record<ModalSize, string> = {
  sm: '420px',
  md: '540px',
  lg: '720px',
  xl: '960px',
};

interface Props {
  open: boolean;
  title: string;
  size?: ModalSize;
  onClose: () => void;
  children: React.ReactNode;
  footer?: React.ReactNode;
}

export default function Modal({ open, title, size = 'md', onClose, children, footer }: Props) {
  const dismiss = useOverlayDismiss(onClose, open);

  if (!open) return null;

  return createPortal(
    <div className="overlay" {...dismiss}>
      <div className="modal" style={{ maxWidth: sizeMap[size] }}>
        <div className="modal-head">
          <h2>{title}</h2>
          <button type="button" className="mini-btn" onClick={onClose} aria-label="بستن">
            <XMarkIcon style={{ width: 18, height: 18 }} />
          </button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </div>,
    document.body
  );
}