import { type FC } from 'react'
import { type ColorVariantType } from '../types/Types'
import Button from '../../../components/Button'
import TrashWithConfrim from '../../../components/TrashWithConfrim'
import VariantEmptyState from './VariantEmptyState'

interface VariantColorsListProps {
    colors: ColorVariantType[]
    onAddClick: () => void
    onDelete: (index: number) => void
    isLoading: boolean
}

const VariantColorsList: FC<VariantColorsListProps> = ({
    colors,
    onAddClick,
    onDelete,
    isLoading
}) => {
    if (!colors || colors.length === 0) {
        return <VariantEmptyState type="colors" onAddClick={onAddClick} />
    }

    return (
        <div className="space-y-4">
            <div className="flex items-center justify-between">
                <h3 className="font-semibold text-gray-800">رنگ‌ها:</h3>
                <Button
                    size="sm"
                    variant="outline"
                    className="w-auto px-3"
                    onClick={onAddClick}
                >
                    اضافه کردن رنگ
                </Button>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                {colors.map((color: ColorVariantType, index: number) => (
                    <div key={color.name} className="p-3 border border-gray-200 rounded-lg bg-white shadow-sm hover:shadow-md transition-shadow flex items-center gap-3 justify-between">
                        <div className="flex items-center gap-3">
                            <div
                                className="w-6 h-6 rounded-full border-2 border-gray-300 shadow-sm"
                                style={{ backgroundColor: color.hexColor }}
                            ></div>
                            <span className="text-gray-700 font-medium">{color.name}</span>
                        </div>
                        <TrashWithConfrim
                            onDelete={() => onDelete(index)}
                            isLoading={isLoading}
                        />
                    </div>
                ))}
            </div>
        </div>
    )
}

export default VariantColorsList
