'use client';

import { useEffect, useState } from 'react';
import { getHeaderTotalHeight } from '@/components/LanguageSwitcher';
import { useCustomerAuth } from '@/presentation/providers/customer-auth-provider';

/** Keeps `--header-height` in sync with the dynamic language bar + navbar. */
export default function HeaderHeightSync() {
  const { isAuthenticated, isMenuManager, isLoading } = useCustomerAuth();
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const update = () => setIsMobile(window.innerWidth < 640);
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);

  useEffect(() => {
    const height = isLoading
      ? getHeaderTotalHeight(true, isMobile, true)
      : getHeaderTotalHeight(isAuthenticated, isMobile, isMenuManager);

    document.documentElement.style.setProperty('--header-height', `${height}px`);
    document.documentElement.dataset.auth = isAuthenticated ? 'true' : 'false';
  }, [isAuthenticated, isMenuManager, isLoading, isMobile]);

  return null;
}