import { FC } from 'react'
import { Brand } from '@/types/products.types'

interface BrandFilterProps {
    brands: Brand[]
    selectedBrand: string
    onBrandChange: (brandId: string) => void
    onBrandClear: () => void
}

const BrandFilter: FC<BrandFilterProps> = ({
    brands,
    selectedBrand,
    onBrandChange,
    onBrandClear,
}) => {
    return (
        <div className='flex flex-col gap-2.5 text-sm text-[#4A4A4A] max-h-48 overflow-y-auto'>
            {brands.map((brand) => (
                <label key={brand._id} className='flex items-center gap-2.5'>
                    <input
                        type='radio'
                        name='brand'
                        className='size-4 border-border'
                        checked={selectedBrand === brand._id}
                        onChange={() => onBrandChange(brand._id)}
                    />
                    {brand.title_fa}
                </label>
            ))}
            <button
                type='button'
                onClick={onBrandClear}
                className='text-xs text-muted-foreground hover:text-foreground text-right mt-1'
            >
                حذف برند
            </button>
        </div>
    )
}

export default BrandFilter
