import MetricSummaryCard from '@/Pages/Metric/MetricSummaryCard';

interface MetricPeriodSummaryProps {
    average?: string | null;
    max?: string | null;
    min?: string | null;
    caption?: string | null;
}

export default function MetricPeriodSummary({
    average,
    max,
    min,
    caption,
}: MetricPeriodSummaryProps) {
    return (
        <div>
            <div className="mt-8 flex gap-4 md:flex-row">
                <MetricSummaryCard
                    title="Media"
                    value={average}
                    className="bg-teal-50"
                />
                <MetricSummaryCard
                    title="Massimo"
                    value={max}
                    className="bg-neutral-200"
                />
                <MetricSummaryCard
                    title="Minimo"
                    value={min}
                    className="bg-neutral-100"
                />
            </div>
            {caption && (
                <div className="mt-2 text-right text-sm text-zinc-500">
                    {caption}
                </div>
            )}
        </div>
    );
}