// src/components/keywords/overview/stat-card.tsx
import type { ReactNode } from "react";

/** A compact KPI: label + big value + optional sublabel. */
export function StatCard({
  label,
  value,
  sub,
}: {
  label: string;
  value: ReactNode;
  sub?: ReactNode;
}) {
  return (
    <div className="rounded-lg border bg-card p-4">
      <div className="text-muted-foreground text-xs uppercase tracking-wide">
        {label}
      </div>
      <div className="mt-1 font-semibold text-2xl tabular-nums">{value}</div>
      {sub ? (
        <div className="mt-0.5 text-muted-foreground text-xs">{sub}</div>
      ) : null}
    </div>
  );
}