import Card from './Card';

export default function StatTile({
    label,
    value,
    hint,
}: {
    label: string;
    value: string | number;
    hint?: string;
}) {
    return (
        <Card className="p-5">
            <p className="text-label-caps text-on-surface-variant">{label}</p>
            <p className="mt-2 text-3xl font-semibold text-on-surface">{value}</p>
            {hint && <p className="mt-1 text-sm text-on-surface-variant">{hint}</p>}
        </Card>
    );
}