// components/common/custom-modal.tsx

'use client';

import { ReactNode } from 'react';
import { PiXBold } from 'react-icons/pi';

interface CustomModalProps {
  open: boolean;
  onClose: () => void;
  title: string;
  children: ReactNode;
}

export default function CustomModal({
  open,
  onClose,
  title,
  children,
}: CustomModalProps) {
  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 p-4">
      <div className="w-full max-w-lg max-h-[90vh] flex flex-col rounded-2xl bg-white shadow-xl relative z-[10000] overflow-hidden">

        {/* Header (fixed) */}
        <div className="flex items-center justify-between border-b border-gray-200 p-5 shrink-0">
          <h3 className="text-lg font-semibold text-gray-900">{title}</h3>

          <button onClick={onClose}>
            <PiXBold className="h-4 w-4" />
          </button>
        </div>

        {/* Body (scrollable) */}
        <div className="p-5 overflow-y-auto flex-1">
          {children}
        </div>

      </div>
    </div>
  );
}