'use client';

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

export default function DynamicToaster() {
  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 headerHeight = isLoading
    ? getHeaderTotalHeight(true, isMobile, true)
    : getHeaderTotalHeight(isAuthenticated, isMobile, isMenuManager);

  return (
    <Toaster
      position="top-center"
      richColors
      closeButton
      offset={headerHeight + 8}
    />
  );
}