import React, { memo } from 'react';
import './Modal.css';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  children: React.ReactNode;
}

function Modal({ isOpen, onClose, title, children }: ModalProps) {
  if (!isOpen) {
    return null;
  }
  return (
    <div className="modal-overlay modal-fadein">
      <div className="modal-container modal-popin">
        <button className="close-button modal-close" onClick={onClose} aria-label="Fermer">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M6 6L18 18M18 6L6 18" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" filter="url(#shadow)" />
            <defs>
              <filter id="shadow" x="-2" y="-2" width="28" height="28" filterUnits="userSpaceOnUse">
                <feDropShadow dx="0" dy="0" stdDeviation="1.2" floodColor="#23242a" />
              </filter>
            </defs>
          </svg>
        </button>
        {title && <div className="modal-header modal-header"><h2>{title}</h2></div>}
        <div className="modal-body modal-body">
          {children}
        </div>
      </div>
    </div>
  );
}

Modal.displayName = 'Modal';
export default memo(Modal);