import { useState } from 'react'
import book from '../../assets/images/books.jpg'
import { useTranslation } from 'react-i18next'
import Tabs from '../../components/Tabs'
import { MoneyTick, MoneyTime } from 'iconsax-react'
import Input from '../../components/Input'
import Button from '../../components/Button'
import RadioGroup from '../../components/RadioGroup'
import bank from '../../assets/images/bank.png'
const PaymentDetails = () => {
    const [activeTab, setActiveTab] = useState<string>('unpaid')
    const { t } = useTranslation('global')
    return (
        <div className='pb-[120px]'>
            <div className="rounded-[32px] bg-white py-6 flex items-center gap-4 px-6">
                <img src={book} className='w-[95px] h-[95px] rounded-2xl' alt="" />
                <div className='space-y-2'>
                    <h2 className='text-[14px]'>دوره مقدماتی</h2>
                    <div className='space-y-[2px]'>
                        <p className='text-[10px] text-description'>1 شنبه - 2 شنبه، ساعت 2 تا 4 عصر</p>
                        <div className='flex items-center gap-1 text-[13px]'>
                            <p className='text-description'>پیش پرداخت :</p>
                            <p>500,000 تومان</p>
                        </div>
                        <div className='flex items-center gap-1 text-[13px]'>
                            <p className='text-description'>کل مبلغ دوره :</p>
                            <p>500,000 تومان</p>
                        </div>
                    </div>
                </div>
            </div>
            <div className='mt-6 w-full'>
                <Tabs
                    isFullWidth
                    active={activeTab}
                    items={[
                        {
                            icon: <MoneyTime color={activeTab === 'unpaid' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('payment.prePay'),
                            value: 'unpaid'
                        },
                        {
                            icon: <MoneyTick color={activeTab === 'not_confimed' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('payment.fullPay'),
                            value: 'not_confimed'
                        }
                    ]}
                    onChange={setActiveTab}
                />
            </div>
            <div className="rounded-[32px] bg-white py-6 mt-6 gap-4 px-6">
                <h2 className='text-[14px]'>{t('payment.fullPay')}</h2>
                <div className='flex items-end mt-4 gap-2 justify-between'>
                    <Input placeholder='کد تخفیف' />
                    <Button className='bg-white text-xs text-black border border-black max-w-[80px]' label='اعمال' />
                </div>
                <div className='flex items-center text-xs gap-3 my-6'>
                    <p className='text-description'>مبلغ قابل پرداخت</p>
                    <div className='border-b border-dashed border-description flex-1'></div>
                    <p>1,000,000 تومان</p>
                </div>
                <div className='flex items-center gap-2'>
                    <RadioGroup
                        items={[
                            {
                                label: t('استفاده از موجودی کیف پول'),
                                value: '3month'
                            },
                            {
                                label: t('پرداخت مستقیم'),
                                value: 'year'
                            }
                        ]}
                        onChange={() => ''}
                        selected={''}
                    />
                </div>
                <div className='text-xs gap-3 my-6'>
                    <h2 className='text-[14px]'>روش پرداخت</h2>
                    <div className='grid grid-cols-2 gap-2 mt-4'>
                        <div className='border border-black rounded-2xl flex items-center justify-center'>
                            <div className='text-center flex flex-col items-center space-y-1 py-4'>
                                <img src={bank} className='h-[50px] w-[50px]' alt="" />
                                <p>بانک پارسیان</p>
                                <p className='text-description text-[10px]'>تمام کارت های عضو شتاب</p>
                            </div>
                        </div>
                        <div className='border border-black rounded-2xl flex items-center justify-center'>
                            <div className='text-center flex flex-col items-center space-y-1 py-4'>
                                <img src={bank} className='h-[50px] w-[50px]' alt="" />
                                <p>بانک پارسیان</p>
                                <p className='text-description text-[10px]'>تمام کارت های عضو شتاب</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default PaymentDetails