1import { FC } from 'react'
 2import { UserType } from '@marzneshin/features/users';
 3import { CircularProgress } from '@nextui-org/progress';
 4import { format } from '@chbphone55/pretty-bytes';
 5import { useTranslation } from 'react-i18next';
 6
 7
 8interface UserUsedTrafficProps {
 9    user: UserType
10}
11
12export const UserUsedTraffic: FC<UserUsedTrafficProps> = (
13    { user }
14) => {
15    const { t } = useTranslation()
16    const formatedUsedTraffic = format(user.used_traffic)
17    const formatedDatalimit = (user.data_limit != null) ? format(user.data_limit) : []
18    return (
19        <div className="flex gap-x-5 justify-start items-center">
20            <CircularProgress
21                value={user.data_limit ? (user.used_traffic / user.data_limit * 100) : 0}
22                size='sm'
23                showValueLabel
24            />
25            <div>
26                <p className="text-sm font-medium text-gray-900 dark:text-gray-50">
27                    {formatedUsedTraffic[0]} {formatedUsedTraffic[1]}
28                </p>
29                <p className="text-sm text-gray-500 dark:text-gray-500">
30                    {user.data_limit ? `${formatedDatalimit[0]} ${formatedDatalimit[1]}` : t('page.users.unlimited')}
31                </p>
32            </div>
33        </div>
34    );
35}