import Button from '@/components/Button'
import ProgressBar from '@/components/ProgressBar'
import { useGetSpace } from '@/pages/setting/domain/hooks/useDomainData'
import { useSharedStore } from '@/shared/store/sharedStore'
import { Cloud } from 'iconsax-react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'

const Storage: FC = () => {

    const { t } = useTranslation()
    const { setOpenBuySpace } = useSharedStore()
    const { data } = useGetSpace()
    return (
        <div className='px-10 pb-5'>
            <div className='flex gap-2 items-center'>
                <Cloud size={20} color='#8C90A3' />
                <div className='text-xs text-description'>
                    {t('sidebar.storage')}
                </div>
            </div>

            <div className='mt-5'>
                <ProgressBar
                    percentage={
                        data?.data?.quota?.totalInGB
                            ? Math.round(
                                (data?.data?.quota?.usedInGB / data?.data?.quota?.totalInGB) * 100
                            )
                            : 0
                    }
                />
            </div>

            <div className='mt-5 text-xs'>
                {data?.data?.quota?.usedInGB} گیگابایت از {data?.data?.quota?.totalInGB} گیگابایت استفاده شده است
            </div>

            <div className='mt-5'>
                <Button
                    variant='secondary'
                    label={t('sidebar.add_space')}
                    onClick={() => setOpenBuySpace(true)}
                />
            </div>


        </div>
    )
}

export default Storage