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

interface VariantSizesListProps {
    sizes: VariantType[]
    onAddClick: () => void
    onDelete: (index: number) => void
    isLoading: boolean
}

const VariantSizesList: FC<VariantSizesListProps> = ({
    sizes,
    onAddClick,
    onDelete,
    isLoading
}) => {
    if (!sizes || sizes.length === 0) {
        return <VariantEmptyState type="sizes" 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">
                {sizes.map((size: VariantType, index: number) => (
                    <div key={size._id} className="p-3 border border-gray-200 rounded-lg bg-white shadow-sm hover:shadow-md transition-shadow flex items-center justify-between">
                        <span className="text-gray-700">{size.value}</span>
                        <TrashWithConfrim
                            onDelete={() => onDelete(index)}
                            isLoading={isLoading}
                        />
                    </div>
                ))}
            </div>
        </div>
    )
}

export default VariantSizesList
