import { clx } from '@/helpers/utils'
import { FC } from 'react'
import { useGetBlogCategories } from '../hooks/useBlogsData'
import Image from 'next/image'
import { useBlogStore } from '../store/BlogStore'
const Category: FC = () => {

    const { data } = useGetBlogCategories()
    const { selectedCategory, setSelectedCategory } = useBlogStore()

    return (
        <div className='w-full rounded-4xl bg-white p-4'>
            <h4>
                دسته بندی مطالب
            </h4>

            <div className='flex flex-col gap-4 mt-7 text-sm'>
                <div className={clx(
                    'h-10 bg-[#ECEFF6] rounded-xl p-2.5 flex items-center gap-2 ',
                    selectedCategory === "" ? 'bg-black text-white' : ''
                )} onClick={() => setSelectedCategory("")}>
                    <div className='size-5 bg-white rounded-full'></div>
                    <h6>همه</h6>
                </div>
                {
                    data?.data?.categories?.map((item) => {
                        return (
                            <div key={item.id} className={clx(
                                'h-10 bg-[#ECEFF6] rounded-xl p-2.5 flex items-center gap-2 cursor-pointer',
                                selectedCategory === item.id ? 'bg-black text-white' : ''
                            )} onClick={() => setSelectedCategory(item.id)}>
                                <div className='size-5 rounded-full overflow-hidden'>
                                    <Image src={item.iconUrl} alt={item.title} width={20} height={20} />
                                </div>
                                <h6>{item.title}</h6>
                            </div>
                        )
                    })
                }


            </div>
        </div>
    )
}

export default Category