import type { ReactNode } from 'react';

export type KpiTone = 'neutral' | 'positive' | 'warning' | 'critical';

export interface KpiCardProps {
  label: string;
  value: ReactNode;
  hint?: string | undefined;
  tone?: KpiTone;
}

export function KpiCard({ label, value, hint, tone = 'neutral' }: KpiCardProps) {
  return (
    <div className={`kpi-card kpi-tone-${tone}`}>
      <div className="kpi-label">{label}</div>
      <div className="kpi-value">{value}</div>
      {hint ? <div className="kpi-hint">{hint}</div> : null}
    </div>
  );
}