interface StatChipProps {
  label: string;
  value: string | number;
  valueClassName?: string;
}

export function StatChip({ label, value, valueClassName }: StatChipProps) {
  const isNumber = typeof value === 'number';
  return (
    <div className="flex-1 min-w-[72px] bg-canvas border border-slate-200 rounded-xl px-3 py-2 shadow-sm">
      <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">{label}</div>
      <div
        className={
          valueClassName ??
          (isNumber
            ? 'text-lg font-extrabold text-slate-900 mt-0.5'
            : 'text-[13px] font-bold text-slate-900 mt-0.5 truncate')
        }
      >
        {value}
      </div>
    </div>
  );
}
