import {lazy, Suspense} from "react";
import {FallingLines} from "react-loader-spinner";
import {useLoadingSwitcher} from "../../hooks/useLoading.jsx";
import {useFetch} from "../../hooks/useFetch.js";
import {AxiosError} from "../../components/AxiosError.jsx";
import {useTranslation} from "react-i18next";

export function StatsPage() {
    const StatsLazy = lazy(() => import('./StatsLazy.jsx'))
    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(`/stats`, setLoading, 1)
    const {t} = useTranslation();

    return <div>
        <h2>{t("stats")}</h2>
        <Suspense fallback={<FallingLines/>}>
            {data
                ? <>
                    <StatsLazy data={data}/>
                </>
                : error && <AxiosError error={error}/>
            }
        </Suspense>
    </div>
}
