'use client'
import React, { useEffect } from 'react'
import ProductVipSection from "@/components/ui/product/ProductVipSection";
import ProductLastSection from "@/components/ui/product/ProductLastSection";
import ProductBlock from "@/components/ui/product/ProductBlock";
import Stores from "@/components/ui/story";
import Category from "@/components/common/Category";
import { useContextGlobal } from '@/context/GlobalContext';
import PopularSeoSection from '@/components/ui/popular-seo-section';
import { useLocale } from 'next-intl';

const HomePage = ({
    storyResponse,
    vipResponse,
    storeResponse,
    actionResponse,
    blockItems,
    lastResponse,
    arrangedProducts,
    categorySeoResponse
}) => {

    const locale = useLocale();
    const { fetchAdsList, resetFilterComponent } = useContextGlobal()

    console.log('🏠 HomePage CLIENT rendering with locale:', locale);
    console.log('📊 HomePage data:', {
        stories: storyResponse?.stories?.length || 0,
        vipProducts: vipResponse?.products?.length || 0,
        lastProducts: lastResponse?.products?.length || 0
    });

    useEffect(() => {
        fetchAdsList({
            type: 1,
            category_id: 0,
            company_id: 0,
        })

        resetFilterComponent()

        return () => {
            fetchAdsList({ reset: true })
        }
    }, [])

    return (
        <>
            <Category />
            {storyResponse?.stories?.length > 0 && <Stores items={storyResponse?.stories} />}
            <ProductVipSection
                items={vipResponse?.products}
            />
            <ProductBlock
                stores={storeResponse?.companies || []}
                actions={actionResponse?.products}
                blocks={blockItems?.blocks}
            />
            <ProductLastSection
                products={arrangedProducts}
                vipProducts={vipResponse?.products}
                companies={storeResponse?.companies || []}
                pagination={lastResponse?.pagination?.has_next_page}
                total={lastResponse?.pagination?.total}
            />
            <PopularSeoSection data={{
                seo_text: null,
                tags: categorySeoResponse?.tags || []
            }} />
        </>
    );
}

export default HomePage