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}
17
18export const UsersStatsWidget: FC<UsersStatsWidgetProps> = ({
19    active, online, expired, on_hold, limited
20}) => {
21    const { t } = useTranslation();
22
23    const data = [
24        { symbol: "Active", amount: active, color: "fill-blue-500" },
25        { symbol: "Online", amount: online, color: "fill-emerald-500" },
26        { symbol: "Expired", amount: expired, color: "fill-gray-600" },
27        { symbol: "On Hold", amount: on_hold, color: "fill-purple-500" },
28        { symbol: "Limited", amount: limited, color: "fill-red-500" },
29    ];
30
31    const total = active + online + expired + on_hold + limited
32
33    return (
34        <MiniWidget
35            title={<> <UsersIcon /> {t('users')} </>}
36        >
37            <div className='flex md:flex-row flex-col items-center md:items-start gap-5 justify-between'>
38                <PieChart
39                    data={data}
40                    width={200}
41                    height={200}
42                    total={total}
43                    label={t('users')}
44                />
45                <UsersStatsLegend />
46            </div>
47        </MiniWidget>
48    );
49};
50