type StatCardProps = {
    label: string;
    value: number | string;
    sub?: string;
    accent?: boolean;
};

export function StatCard({ label, value, sub, accent = false }: StatCardProps) {
    return (
        <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-5">
            <p className="text-sm text-zinc-400">{label}</p>
            <p
                className={`mt-1 text-3xl font-semibold tabular-nums ${accent ? 'text-violet-400' : 'text-zinc-100'}`}
            >
                {value}
            </p>
            {sub && <p className="mt-1 text-xs text-zinc-500">{sub}</p>}
        </div>
    );
}