"use client";

import { useState, ReactNode, useEffect } from "react";

interface ClientModalProps {
  isOpen: boolean;
  onClose: () => void;
  children: ReactNode; // This will receive the Server Component's output
  title?: string;
}

export default function ClientModal({
  isOpen,
  onClose,
  children,
}: ClientModalProps) {
  // Optional: Prevent body scroll when modal is open
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "unset";
    }
    return () => {
      document.body.style.overflow = "unset";
    };
  }, [isOpen]);

  if (!isOpen) {
    return null;
  }

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
      onClick={onClose} // Close on overlay click
    >
      <div
        className="p-6 bg-white rounded-lg shadow-xl w-11/12 max-w-lg"
        onClick={(e) => e.stopPropagation()} // Prevent click from closing modal if clicking inside content
      >
        <button
          onClick={onClose}
          className="text-gray-500 hover:text-gray-700"
          aria-label="Close modal"
        >
          × {/* A simple 'X' close button */}
        </button>
        <div>
          {children} {/* Server Component content will be rendered here */}
        </div>
      </div>
    </div>
  );
}
