'use client'

import ProductCategoryBox from '@/app/components/layout/shop/products-cat'
import axiosInstance from '@/axios/axiosInstance'
import { useEffect } from 'react'
import { useQuery } from '@tanstack/react-query'

const Page =  ()=>{

    const query = useQuery({ queryKey: ['categoryProducts'], queryFn: async ()=>{

        return await axiosInstance.get("shop/v2/product-category/list/")
    },refetchOnWindowFocus:true, })

    const category = query.data?.data ?? []
    useEffect(() => {
        if (!query.isSuccess) return
        const frame = requestAnimationFrame(() => {
            try {
                const position = Number(localStorage.getItem('scrollY'))
                if (Number.isFinite(position) && position > 0) window.scrollTo(0, position)
            } catch {
                console.warn('Could not restore the saved shop scroll position.')
            }
        })
        return () => cancelAnimationFrame(frame)
    }, [query.isSuccess])

    if(query.isLoading){
        return (
            <p className='text-center'>درحال دریافت اطلاعات</p>
        )
    }

    if(query.isError){
        return (
            <p className='text-center'>
                خطا در دریافت اطلاعات
            </p>
        )
    }

    return (
        <>
            <div className="grid grid-cols-2 min-[1350px]:grid-cols-5 min-[767px]:grid-cols-3 min-[1100px]:grid-cols-4 gap-x-2 gap-y-2">
                {query.isSuccess?category.map((iteam:any)=>{
                    return <ProductCategoryBox key={iteam.id} iteam={iteam} />
                }):null}

            </div>
        </>
    )
}

export default Page