import { type FC } from 'react'
import { TicketDiscount } from 'iconsax-react'

interface DiscountCode {
    id: string
    code: string
    expiryDate: string
    status: 'used' | 'unused'
}

const DiscountCodesTable: FC = () => {
    const discountCodes: DiscountCode[] = [
        {
            id: '1',
            code: 'A12345',
            expiryDate: '1403/12/01',
            status: 'unused'
        },
        {
            id: '2',
            code: 'A12345',
            expiryDate: '1403/12/01',
            status: 'used'
        },
        {
            id: '3',
            code: 'A12345',
            expiryDate: '1403/12/01',
            status: 'used'
        }
    ]

    const getStatusStyles = (status: 'used' | 'unused') => {
        if (status === 'unused') {
            return 'text-[#0047FF]'
        }
        return 'text-[#FF0000]'
    }

    const getStatusText = (status: 'used' | 'unused') => {
        return status === 'unused' ? 'استفاده نشده' : 'استفاده شده'
    }

    return (
        <div className='mt-4'>
            <table className='w-full'>
                <thead>
                    <tr className='border-b border-border'>
                        <th className='text-right pb-2 font-light text-xs text-description'>
                            کد
                        </th>
                        <th className='text-center pb-2 font-light text-xs text-description'>
                            انقضا
                        </th>
                        <th className='text-center pb-2 font-light text-xs text-description'>
                            وضعیت
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {discountCodes.map((item) => (
                        <tr
                            key={item.id}
                            className='border-b border-border last:border-0'
                        >
                            <td className='py-2.5 text-xs font-light'>
                                {item.code}
                            </td>
                            <td className='py-2.5 text-xs font-light text-description text-center'>
                                {item.expiryDate}
                            </td>
                            <td className='py-2.5 text-center'>
                                <span
                                    className={`inline-block py-0.5 rounded-md text-xs font-light ${getStatusStyles(item.status)}`}
                                >
                                    {getStatusText(item.status)}
                                </span>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>

            <button className='w-full mt-4 bg-black text-white rounded-xl py-3 flex items-center justify-center gap-2 text-xs font-light hover:bg-gray-800 transition-colors'>
                <TicketDiscount size={16} />
                <span>اضافه کردن کد تخفیف</span>
            </button>
        </div>
    )
}

export default DiscountCodesTable

