import { Plus } from 'lucide-react';

export default function GiftCardRedeem({ redeemCode, setRedeemCode, onRedeem }) {
    return (
        <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-gray-200 dark:border-zinc-800 p-4">
            <p className="text-xs font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-1">
                <Plus className="w-3.5 h-3.5 text-emerald-500" /> اضافه کردن کارت هدیه
            </p>
            <div className="flex gap-2">
                <input type="text" value={redeemCode} onChange={(e) => setRedeemCode(e.target.value)}
                    placeholder="کد کارت هدیه را وارد کنید"
                    className="flex-1 px-3 py-2.5 bg-gray-50 dark:bg-zinc-800 rounded-xl text-xs border border-gray-200 dark:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-[#E53935] text-gray-900 dark:text-white placeholder-gray-400" />
                <button onClick={onRedeem}
                    className="px-4 py-2.5 bg-emerald-500 text-white rounded-xl text-xs font-bold hover:bg-emerald-600 transition-all shadow-lg shadow-emerald-500/30">
                    ثبت
                </button>
            </div>
        </div>
    );
}