"use client";

import { useEffect } from "react";
import clsx from "clsx";

import styles from "./FullScreenBlurModal.module.scss";

interface FullScreenBlurModalProps {
  className?: string;
  classNameContent?: string;
  style?: React.CSSProperties;
  children: React.ReactNode;
  isOpen: boolean;
}

export default function FullScreenBlurModal({
  className = "",
  classNameContent = "",
  children,
  style,
  isOpen,
}: FullScreenBlurModalProps) {
  useEffect(() => {
    if (isOpen) {
      document.body.classList.add("no-scroll");
    }

    return () => {
      document.body.classList.remove("no-scroll");
    };
  }, [isOpen]);

  return (
    <div
      style={style}
      className={clsx(styles.modal, className, isOpen && styles.open)}
    >
      <div className={clsx(styles.content, classNameContent)}>{children}</div>
    </div>
  );
}