import { RGPDStats as Stats } from "../../../../app/config/rgpd.types";

interface Props {
    stats: Stats
}

export default function RGPDStats({ stats }: Props) {
    return (
        <div className="grid md:grid-cols-5 gap-1">

            <Card
                label="Total"
                value={stats.total}
            />

            <Card
                label="Reçues"
                value={stats.recues}
            />

            <Card
                label="En cours"
                value={stats.en_cours}
            />

            <Card
                label="Terminées"
                value={stats.terminees}
            />

            <Card
                label="En retard"
                value={stats.en_retard}
            />

        </div>
    );
}

function Card({ label, value }: { label: string; value: number; }) {
    return (
        <div className="bg-white rounded-2xl shadow p-3.5">

            <div className="text-sm text-gray-500">
                {label}
            </div>

            <div className="text-3xl font-bold text-[#2f7d5f] mt-1">
                {value}
            </div>

        </div>
    );
}