'use client'
import React from 'react'
import CategoryItem from './CategoryItem'
import { useGetCategories } from '@/share/hooks/useShareData'
import { Category } from '@/share/types/SharedTypes'

const Categories = () => {

    const { data } = useGetCategories()
    const parentCategories = data?.results?.data?.filter(cat => !cat.parent) || []

    return (
        <div className='w-full overflow-x-auto overflow-y-hidden'>
            <div className='flex justify-center gap-4 sm:gap-6 md:gap-6 w-full min-w-max px-4 sm:px-8 md:px-20'>
                {parentCategories?.map((item: Category) => (
                    <div key={item._id} className='flex-shrink-0'>
                        <CategoryItem image={item.imageUrl} title={item.title_fa} categoryUrl={item.title_en} />
                    </div>
                ))}
            </div>
        </div>
    )
}

export default Categories