import React, { ReactNode, useState } from 'react';
import { useRouter } from 'next/router';
import PromoBar from './PromoBar';
import StoreHeader from './StoreHeader';
import CategoriesSection from './CategoriesSection';
import Footer from './Footer';
import CookieConsent from './CookieConsent';
import BannerSection from './BannerSection';
import ScrollRestoration from './ScrollRestoration';

interface LayoutProps {
  children: ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  const router = useRouter();
  const [showCategories, setShowCategories] = useState(false);
  const isHomePage = router.pathname === '/';
  const isProductPage = router.pathname === '/product/[id]';



  return (
    <div
      className={`min-h-screen w-full bg-luxury-dark ${
        isProductPage ? 'pb-[calc(4.75rem+env(safe-area-inset-bottom))] md:pb-0' : ''
      }`}
      onMouseLeave={() => setShowCategories(false)}
    >
      <ScrollRestoration />
      <PromoBar />
      <StoreHeader
        onHoverChange={setShowCategories}
      />
      {isHomePage && <BannerSection />}
      <CategoriesSection
        isVisible={showCategories}
      />
      <main className={`w-full ${!isHomePage ? 'pt-12 md:pt-16 lg:pt-8' : 'pt-0'}`}>
        {children}
      </main>
      <Footer />
      <CookieConsent />
    </div>
  );
};

export default Layout;