import { Cards, Money3, MoneyRecive, TickSquare } from 'iconsax-react'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Tabs from '../../components/Tabs'
import Online from './components/Online'
import CardtoCard from './components/CardtoCard'
import Sheba from './components/Sheba'
import withAuth from '../../hoc/withAuth'

const Wallet: FC = () => {

    const { t } = useTranslation('global')
    const [activeTab, setActiveTab] = useState<string>('online')

    return (
        <div className='mt-4 pb-14'>
            <div>
                {t('wallet.increese_wallet')}
            </div>

            <div className='mt-8 flex gap-6'>
                <div className='flex-1'>
                    <Tabs
                        isFullWidth
                        active={activeTab}
                        items={[
                            {
                                label: t('wallet.online_pay'),
                                value: 'online',
                                icon: <MoneyRecive color={activeTab === 'online' ? 'black' : '#8C90A3'} size={22} />
                            },
                            {
                                icon: <Cards color={activeTab === 'card' ? 'black' : '#8C90A3'} size={22} />,
                                label: t('wallet.card_to_card'),
                                value: 'card'
                            },
                            {
                                icon: <Money3 color={activeTab === 'sheba' ? 'black' : '#8C90A3'} size={22} />,
                                label: t('wallet.sheba'),
                                value: 'sheba'
                            },
                        ]}
                        onChange={setActiveTab}
                    />

                    {
                        activeTab === 'online' ?
                            <Online />
                            : activeTab === 'card' ?
                                <CardtoCard />
                                : <Sheba />
                    }

                </div>

                <div className='bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
                    <div className='text-sm'>
                        {t('ticket.title_hint')}
                    </div>

                    <div className='mt-6'>
                        <div className='flex items-start gap-2 border-b pb-5'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.
                            </div>
                        </div>
                        <div className='flex items-start gap-2 mt-6 border-b pb-5'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.
                            </div>
                        </div>
                        <div className='flex items-start gap-2 mt-6'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    )
}

// استفاده از HOC با آپشن‌های سفارشی
export default withAuth(Wallet)