1import { FC } from 'react';
 2import { UsersIcon } from 'lucide-react';
 3import { useTranslation } from 'react-i18next';
 4import {
 5    MiniWidget,
 6    PieChart,
 7} from "@marzneshin/components";
 8import { UsersStatsLegend } from './legend';
 9
10interface UsersStatsWidgetProps {
11    active: number;
12    online: number;
13    expired: number;
14    on_hold: number;
15    limited: number;
16    total: number;
17}
18
19export const UsersStatsWidget: FC<UsersStatsWidgetProps> = ({
20    active, online, expired, on_hold, limited, total,
21}) => {
22    const { t } = useTranslation();
23
24    const data = [
25        { symbol: "Active", amount: active, color: "fill-blue-500" },
26        { symbol: "Online", amount: online, color: "fill-emerald-500" },
27        { symbol: "Expired", amount: expired, color: "fill-gray-600" },
28        { symbol: "On Hold", amount: on_hold, color: "fill-purple-500" },
29        { symbol: "Limited", amount: limited, color: "fill-red-500" },
30    ];
31
32    return (
33        <MiniWidget
34            title={<> <UsersIcon /> {t('users')} </>}
35        >
36            <div className='flex md:flex-row flex-col items-center md:items-start gap-5 justify-between'>
37                <PieChart
38                    data={data}
39                    width={200}
40                    height={200}
41                    total={total}
42                    label={t('users')}
43                />
44                <UsersStatsLegend />
45            </div>
46        </MiniWidget>
47    );
48};
49