import type { ReactNode } from 'react';
import { Card, CardContent } from '@/components/ui/card';

/**
 * Single KPI tile for the list-page KPI strip (05-UI-UX §5). Value carries the
 * headline number; optional hint sits beneath it.
 */
export function Kpi({
    label,
    value,
    hint,
}: {
    label: string;
    value: ReactNode;
    hint?: string;
}) {
    return (
        <Card>
            <CardContent className="py-4">
                <p className="text-xs tracking-wide text-muted-foreground uppercase">
                    {label}
                </p>
                <p className="mt-1 text-2xl font-semibold text-foreground">
                    {value}
                </p>
                {hint && (
                    <p className="mt-0.5 text-xs text-muted-foreground">
                        {hint}
                    </p>
                )}
            </CardContent>
        </Card>
    );
}