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

function useContainerHeight(): string {
    const [containerHeight, setContainerHeight] = useState("100vh");

    useEffect(() => {
        const calculateHeight = () => {
            const footer = document.getElementById("tx.home.footer.container");
            return footer ? `calc(100vh - ${footer.clientHeight}px - 138px)` : "100vh";
        };

        setContainerHeight(calculateHeight());

        // Escuchar cambios de tamaño en la ventana por si el footer cambia
        const handleResize = () => setContainerHeight(calculateHeight());

        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);

    return containerHeight;
}

export default useContainerHeight;
