"use client";

import { useEffect, type ReactNode } from "react";
import { IoClose, IoCloseCircle } from "react-icons/io5";
import { useModal } from "../../lib/modal-system/ModalContext";

interface ModalProps {
  children: ReactNode;
  maxWidth?: string;
  className?: string;
  showCloseButton?: boolean;
}

export default function Modal({
  children,
  maxWidth = "max-w-[560px]",
  className = "",
  showCloseButton = true,
}: ModalProps) {
  const { closeModal } = useModal();

  useEffect(() => {
    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = "auto";
    };
  }, []);

  return (
    <div
      className="
        fixed inset-0 z-9999
        overflow-y-auto
        bg-black/40 backdrop-blur-sm
        px-4 py-6
        md:px-6 md:py-10
        animate-modal-overlay
      "
    >
      <div
        className="
          flex
          min-h-[calc(100dvh-48px)]
          justify-center
          md:min-h-[calc(100dvh-80px)]
          items-center
        "
      >
        <div
          onClick={(e) => e.stopPropagation()}
          className={`
            relative
            w-full
            rounded-3xl
            bg-white
            p-5
            pt-12
            shadow-[0px_30px_80px_rgba(0,0,0,0.15)]
            md:px-10
            md:pt-15
            md:pb-8
            animate-modal-content
            ${maxWidth}
            ${className}
          `}
        >
          {showCloseButton && (
           <button
            type="button"
            onClick={closeModal}
            className="group absolute right-4 top-4 rounded-full border border-link-1 p-1 text-link-1 transition hover:bg-link-1 hover:text-white md:right-6 md:top-6 cursor-pointer">
            <IoClose
              size={20}
              className="transition-transform duration-300 group-hover:rotate-180"
            />
          </button>
          )}

          {children}
        </div>
      </div>
    </div>
  );
}