import DefaulModal from '@/components/DefaulModal'
import { useSharedStore } from '@/shared/store/sharedStore'
import { useTranslation } from 'react-i18next'
import { FC, useState } from 'react'
import { clx } from '@/helpers/utils'
import Input from '@/components/Input'
import { NumberFormat } from '@/config/func'

const BuySpace: FC = () => {

    const { t } = useTranslation()
    const { openBuySpace, setOpenBuySpace } = useSharedStore()
    const [spaceSelected, setSpaceSelected] = useState(1)

    return (
        <DefaulModal
            open={openBuySpace}
            close={() => setOpenBuySpace(false)}
            isHeader={true}
            title_header={t('space.title')}
        >
            <div>
                <div className='mt-8 text-sm'>
                    {t('space.select_space')}
                </div>
                <div className='mt-4 flex gap-4 flex-wrap'>
                    <div onClick={() => setSpaceSelected(1)} className={clx(
                        'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
                        spaceSelected === 1 && 'border-black'
                    )}>
                        1 گیگبایت
                    </div>
                </div>

                <div className='mt-8'>
                    <Input
                        label={t('space.enter_space')}
                        className='bg-white/50'
                    />
                </div>

                <div className='mt-6 flex gap-1'>
                    <div className='text-xs'>{t('space.price')}</div>
                    <div className='font-bold text-xs'>{NumberFormat(1000000)} تومان</div>
                </div>
            </div>
        </DefaulModal >
    )
}

export default BuySpace