import { type FC } from 'react'
import Button from '../../../components/Button'

interface VariantEmptyStateProps {
    type: 'sizes' | 'colors' | 'meterages'
    onAddClick: () => void
}

const VariantEmptyState: FC<VariantEmptyStateProps> = ({ type, onAddClick }) => {
    const getContent = () => {
        switch (type) {
            case 'sizes':
                return {
                    icon: (
                        <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                    ),
                    title: 'هیچ سایزی تعریف نشده',
                    description: 'برای شروع، سایز جدیدی اضافه کنید',
                    buttonText: 'اضافه کردن اولین سایز'
                }
            case 'colors':
                return {
                    icon: (
                        <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z" />
                        </svg>
                    ),
                    title: 'هیچ رنگی تعریف نشده',
                    description: 'برای شروع، رنگ جدیدی اضافه کنید',
                    buttonText: 'اضافه کردن اولین رنگ'
                }
            case 'meterages':
                return {
                    icon: (
                        <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                        </svg>
                    ),
                    title: 'هیچ متریاژی تعریف نشده',
                    description: 'برای شروع، متریاژ جدیدی اضافه کنید',
                    buttonText: 'اضافه کردن اولین متریاژ'
                }
        }
    }

    const { icon, title, description, buttonText } = getContent()

    return (
        <div className="flex flex-col items-center justify-center py-12 px-6 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
            <div className="text-center space-y-4">
                <div className="w-16 h-16 mx-auto bg-gray-200 rounded-full flex items-center justify-center">
                    {icon}
                </div>
                <div>
                    <h3 className="text-lg font-medium text-gray-900 mb-1">{title}</h3>
                    <p className="text-gray-500 mb-4">{description}</p>
                </div>
                <Button
                    variant="primary"
                    onClick={onAddClick}
                    className="px-6"
                >
                    {buttonText}
                </Button>
            </div>
        </div>
    )
}

export default VariantEmptyState
