import { createFileRoute } from '@tanstack/react-router'
import {
    Page,
} from '@marzneshin/components';
import { UsersStatsWidget, useUsersStatsQuery } from '@marzneshin/modules/users';
import { TotalTrafficsWidget } from '@marzneshin/features/total-traffic-widget';
import { useTranslation } from 'react-i18next';
import { FC } from 'react';

export const DashboardPage: FC = () => {
    const { t } = useTranslation();
    const { data } = useUsersStatsQuery()

    return (
        <Page className="flex flex-col gap-4 w-full" title={t('home')}>
            <div className={`grid grid-cols-1 md:grid-cols-12 gap-4`}>
                <div className={data.total !== 0 ? "md:col-span-8" : "md:col-span-12"}>
                    <TotalTrafficsWidget />
                </div>

                {data.total !== 0 && (
                    <div className="md:col-span-4">
                        <UsersStatsWidget {...data} />
                    </div>
                )}
            </div>
        </Page>
    )
};


export const Route = createFileRoute('/_dashboard/')({
    component: () => <DashboardPage />
})