'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='flex gap-6 justify-center'>
            {
                parentCategories?.map((item: Category) => {
                    return (
                        <CategoryItem key={item._id} image={item.imageUrl} title={item.title_fa} />

                    )
                })
            }


        </div>
    )
}

export default Categories