'use client';

import {useEffect, useState} from "react";
import StatisticsType from "@/api-queries/statistics/statistics-type";


export default function Stats() {
    const [stats, setStats] = useState<StatisticsType | null>(null);

    useEffect(() => {
        (async () => {
            const response = await fetch("/api/stats");
            const data = await response.json();

            setStats(data);
        })();
    }, []);

    return <div className="flex flex-col gap-5">
        {!stats ? <p>Loading...</p> :
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
                <div>
                    <h4 className="text-xl font-bold mb-5">Total scan count</h4>

                    <div className="font-bold">{stats.totalScanCount}</div>
                </div>

                <div>
                    <h4 className="text-xl font-bold mb-5">Latest scans</h4>

                    <div className="flex flex-col gap-3">
                        {stats.latestScans.map(
                            (scan, index) =>
                                <p key={index}>
                                    <strong>{scan.code}</strong> - {scan.scannedAt}
                                </p>
                        )}
                    </div>
                </div>
            </div>
        }
    </div>;
}