"use client";
import { useEffect, useState } from "react";

type ConstructionModalProps = {
  isOpen: boolean;
  onClose: () => void;
};

export function ConstructionModal({ isOpen, onClose }: ConstructionModalProps) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [isOpen]);

  if (!mounted || !isOpen) return null;

  return (
    <>
      <div className="modal-overlay" onClick={onClose} aria-hidden="true" />
      <div
        className="modal-dialog"
        role="alertdialog"
        aria-modal="true"
        aria-labelledby="modal-title"
        aria-describedby="modal-description"
      >
        <div className="modal-content">
          <h2 id="modal-title" className="modal-title">Sorry! This isn't available at this time.</h2>
          <p id="modal-description" className="modal-description">
            The english version of powerlifting.pt is currently being built and will be available as soon as possible.
          </p>
          <p className="modal-info">
            For now, all the content is available in Portuguese. You may also quickly translate it using your browser's native translating tool.
          </p>
          <button
            type="button"
            onClick={onClose}
            className="modal-button"
            aria-label="Fechar diálogo"
          >
            Entendido
          </button>
        </div>
      </div>
    </>
  );
}
