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

const Categories = () => {

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

    return (
        <div className='w-full'>
            <Swiper
                spaceBetween={16}
                slidesPerView={'auto'}
                className='h-full'
                breakpoints={{
                    640: {
                        spaceBetween: 24,
                    },
                }}
            >
                {parentCategories?.map((item: Category) => (
                    <SwiperSlide key={item._id} className='!w-auto'>
                        <CategoryItem image={item.imageUrl} title={item.title_fa} />
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    )
}

export default Categories