import { useState } from 'react'
import { IoClose } from 'react-icons/io5'

const Modal = ({
  isOpen,
  onClose,
  title,
  children,
  size = 'md',
  closeOnOverlay = true,
}) => {
  if (!isOpen) return null

  const sizes = {
    sm: 'max-w-sm',
    md: 'max-w-md',
    lg: 'max-w-xl',
    xl: 'max-w-3xl',
    '2xl': 'max-w-5xl',
    '3xl': 'max-w-[70vw]',
    '4xl': 'max-w-[85vw]',
  }

  return (
    <div
      className={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
        }`}
      onClick={closeOnOverlay ? onClose : undefined}
    >
      <div className="absolute inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-sm" />

      <div
        className={`relative bg-white dark:from-slate-800 dark:to-slate-900 rounded-2xl shadow-2xl w-full mx-4 ${sizes[size]} animate-slide-down border border-[#B2E0E8]/50 dark:border-slate-700`}
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between p-5 border-b border-[#B2E0E8]/50 dark:border-slate-700 bg-gradient-to-r from-[#2AA8B8] to-[#1E8E9E] rounded-t-2xl">
          <h2 className="text-xl font-bold text-white">{title}</h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-white/20 rounded-lg transition-all font-bold text-white"
          >
            <IoClose size={20} />
          </button>
        </div>

        {/* Body */}
        <div className="p-6 max-h-[70vh] overflow-y-auto custom-scrollbar">
          {children}
        </div>
      </div>
    </div>
  )
}

export default Modal
