// components/ui/Modal.tsx
'use client';
import { ReactNode, useEffect } from 'react';
import clsx from 'clsx';

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

export interface ModalProps {
  name: string;
  isOpen: boolean;
  onClose: () => void;
  size?: ModalSize;
  title?: string;
  subtitle:string;
  showHeader?: boolean;
  showFooter?: boolean;
  children: ReactNode;
  footerContent?: ReactNode;
}

export default function Modal({
  name,
  isOpen,
  onClose,
  size = 'md',
  title,
  subtitle,
  showHeader = true,
  showFooter = true,
  children,
  footerContent,
}: ModalProps) {

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = ''
    }

    return () => {
      document.body.style.overflow = ''
    }
  }, [isOpen])
  if (!isOpen) return null;

  const sizeMap = {
    sm: 'max-w-sm',
    md: 'max-w-md',
    lg: 'max-w-3xl',
    xl: 'max-w-4xl',
    xxl: 'max-w-6xl',
  };

  return (
    <div className="fixed inset-0 z-9999 flex items-center justify-center bg-gray-950/75">
      <div
        className={clsx('w-full mt-5 md:mt-12 bg-white p-3 md:p-5 max-h-lvh', sizeMap[size])}
        role="dialog"
        aria-label={name}
      >
        {/* Header */}
        {showHeader && (
          <div className="flex justify-between pl-2 align-top items-start">
            <div className='flex flex-col py-2'>
            <h1 className="med">{title}</h1>
            <p className='text-xs font-medium'>{subtitle}</p>
            </div>
            <button onClick={onClose} className='btn-link'>
              <i className='icon-[icon-park-outline--close]' style={{width:24, height:24}}></i>
            </button>
          </div>
        )}

        <div className="p-2 max-h-[600px] md:max-h-[480px] overflow-x-hidden overflow-y-auto">{children}</div>

        {showFooter && (
          <div className="flex flex-row justify-end items-center align-middle pb-5 px-12 text-right">
            {footerContent ?? (
              <button
                onClick={onClose}
                className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
              >
                Close
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}