"use client";

import { useEffect, type ReactNode } from "react";
import { 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-[659px]",
  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
      "
    >
      <div
        className="
          flex
          min-h-[calc(100dvh-48px)]
          items-start
          justify-center
          md:min-h-[calc(100dvh-80px)]
          md:items-center
        "
      >
        <div
          onClick={(e) => e.stopPropagation()}
          className={`
            relative
            w-full
            ${maxWidth}
            rounded-3xl
            bg-white
            p-6
            shadow-[0px_30px_80px_rgba(0,0,0,0.15)]
            md:px-10
            md:py-15
            ${className}
          `}
        >
          {showCloseButton && (
            <button
              type="button"
              onClick={closeModal}
              className="
                absolute
                right-4
                top-4
                cursor-pointer
                text-link-1
                md:right-6
                md:top-6
              "
            >
              <IoCloseCircle size={28} />
            </button>
          )}

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