import { Button } from '@/components/ui/button'
import Input from '@/components/Input'
import { FC, useState } from 'react'

type DiscountCardProps = {
    discountCode: string
    setDiscountCode: (code: string) => void
    onSubmit: () => void
    isLoading?: boolean
}

const DiscountCard: FC<DiscountCardProps> = ({
    discountCode,
    setDiscountCode,
    onSubmit,
    isLoading = false
}) => {
    const [isExpanded, setIsExpanded] = useState(false)

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        onSubmit()
    }

    if (!isExpanded) {
        return (
            <div className='h-16 border border-border rounded-2xl flex justify-between mt-5 items-center px-6'>
                <div>
                    کد تخفیف دارید؟
                </div>

                <Button
                    variant={'ghost'}
                    className='text-left p-0 text-primary hover:bg-transparent cursor-pointer'
                    onClick={() => setIsExpanded(true)}
                >
                    ثبت کد
                </Button>
            </div>
        )
    }

    return (
        <div className='border border-border rounded-2xl mt-5 p-4 sm:p-6'>
            <div className='text-sm font-medium mb-4'>کد تخفیف</div>

            <form onSubmit={handleSubmit} className='flex gap-3'>
                <Input
                    type="text"
                    placeholder="کد تخفیف خود را وارد کنید"
                    value={discountCode}
                    onChange={(e) => setDiscountCode(e.target.value)}
                    className="flex-1"
                    disabled={isLoading}
                    label=""
                />
                <Button
                    type="submit"
                    disabled={isLoading || !discountCode.trim()}
                    className="px-6"
                >
                    {isLoading ? 'در حال اعمال...' : 'اعمال'}
                </Button>
                <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                        setIsExpanded(false)
                        setDiscountCode('')
                    }}
                    className="px-4"
                >
                    لغو
                </Button>
            </form>
        </div>
    )
}

export default DiscountCard