import { cn } from '@/lib/utils';

export interface KpiDelta {
  direction: 'up' | 'down' | 'flat';
  text: string;
}

export interface KpiCardProps {
  label: string;
  value: string;
  delta?: KpiDelta;
}

const DIRECTION_CLASS: Record<KpiDelta['direction'], string> = {
  up:   'text-forest',
  down: 'text-terracotta',
  flat: 'text-ink/60',
};

const DIRECTION_ARROW: Record<KpiDelta['direction'], string> = {
  up:   '▲',
  down: '▼',
  flat: '•',
};

export function KpiCard({ label, value, delta }: KpiCardProps) {
  return (
    <div className="rounded-md border border-forest/20 bg-bone p-4">
      <div className="text-xs uppercase tracking-wide text-forest/70">{label}</div>
      <div className="mt-1 text-2xl font-semibold text-ink">{value}</div>
      {delta ? (
        <div
          data-testid="kpi-delta"
          className={cn('mt-1 text-xs font-medium', DIRECTION_CLASS[delta.direction])}
        >
          {DIRECTION_ARROW[delta.direction]} {delta.text}
        </div>
      ) : null}
    </div>
  );
}