import { Icons } from '../icons/Icons';

export default function Modal({ open, onClose, title, children, w = 540 }) {
  if (!open) return null;
  return (
    <div
      className="fixed inset-0 bg-black/65 flex items-center justify-center z-50 p-3 sm:p-4"
      onClick={onClose}
    >
      <div
        className="bg-s1 border border-bd rounded-[10px] p-4 sm:p-5 w-full overflow-auto"
        style={{ maxWidth: w, maxHeight: '90vh' }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-[15px] font-bold">{title}</h3>
          <span className="cursor-pointer text-t2 hover:text-t1" onClick={onClose}>
            <Icons.X />
          </span>
        </div>
        {children}
      </div>
    </div>
  );
}
