"use client";

import { CircleX } from "lucide-react";
import { ReactNode, useEffect } from "react";
import { cn } from "@/lib/utils";

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  children: ReactNode;
  size?: "sm" | "md" | "lg";
}

const sizeClasses = {
  sm: "sm:w-[90%] md:w-[40%] lg:w-[35%]",
  md: "sm:w-[90%] md:w-[60%] lg:w-[55%]",
  lg: "sm:w-[90%] md:w-[75%] lg:w-[70%]",
};

export default function Modal({ isOpen, onClose, children, size = "sm" }: ModalProps) {
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden"; // Prevent background scroll
    } else {
      document.body.style.overflow = "";
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
      <div
        className={cn(
          "relative w-full h-full sm:h-auto bg-white rounded-lg p-6 shadow-lg overflow-y-auto",
          sizeClasses[size]
        )}
      >
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute top-2 right-2 text-red-600 hover:text-gray-900 text-xl"
          style={{ fontSize: 40 }}
        >
          <CircleX />
        </button>

        {/* Modal Content */}
        {children}
      </div>
    </div>
  );
}