import { FC } from 'react'
import { BlogCategory } from '../types/Types'

interface CategoriesProps {
    categories: BlogCategory[]
    selectedCategory?: string | null
    onCategorySelect?: (slug: string | null) => void
}

const Categories: FC<CategoriesProps> = ({
    categories,
    selectedCategory,
    onCategorySelect
}) => {
    if (!categories || categories.length === 0) {
        return (
            <div className='max-w-[292px] w-full'>
                <div className='h-20 bg-primary rounded-[10px] flex items-center px-4 text-white text-lg'>
                    دسته بندی مطالب
                </div>
                <div className='text-center text-sm text-[#8C8C8C] mt-4'>
                    هیچ دسته‌بندی یافت نشد
                </div>
            </div>
        )
    }

    return (
        <div className='max-w-[292px] w-full'>
            <div className='h-20 bg-primary rounded-[10px] flex items-center px-4 text-white text-lg'>
                دسته بندی مطالب
            </div>

            <div className='flex flex-col gap-3 mt-4'>
                {/* All Categories */}
                <div
                    onClick={() => onCategorySelect?.(null)}
                    className={`h-14 rounded-[10px] px-4 flex items-center justify-between transition-colors cursor-pointer ${selectedCategory === null
                        ? 'bg-primary text-white'
                        : 'bg-[#F8F8F8] text-[#8C8C8C] hover:bg-[#E8E8E8]'
                        }`}
                >
                    <div className='font-medium'>همه مطالب</div>
                    <div className={`size-3 rounded-full ${selectedCategory === null ? 'bg-white' : 'bg-[#D9D9D9]'
                        }`}></div>
                </div>

                {/* Category Items */}
                {categories.map((category) => (
                    <div
                        key={category._id}
                        onClick={() => onCategorySelect?.(category.slug)}
                        className={`h-14 rounded-[10px] px-4 flex items-center justify-between transition-colors cursor-pointer ${selectedCategory === category.slug
                            ? 'bg-primary text-white'
                            : 'bg-[#F8F8F8] text-[#8C8C8C] hover:bg-[#E8E8E8]'
                            }`}
                    >
                        <div className='font-medium'>{category.title_fa}</div>
                        <div className={`size-3 rounded-full ${selectedCategory === category.slug ? 'bg-white' : 'bg-[#D9D9D9]'
                            }`}></div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default Categories