'use client';

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

/** Reserves vertical space for the fixed language bar + navbar. */
export default function HeaderSpacer() {
  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);
  }, []);

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

  return (
    <div
      aria-hidden
      className="shrink-0 transition-[height] duration-200"
      style={{ height }}
    />
  );
}