/**
 * F-147 — KpiCard component.
 * Shows a key metric with label, optional comparison, and availability badge.
 */

import type { Availability } from '@/lib/reporting-client';
import { AvailabilityBadge } from './AvailabilityBadge';

interface KpiCardProps {
  label: string;
  value: string;
  availability: Availability;
  comparison?: { label: string; value: string; positive?: boolean };
}

function formatComparison(val: string) {
  const num = parseFloat(val);
  if (isNaN(num)) return val;
  const sign = num > 0 ? '+' : '';
  return `${sign}${num.toFixed(1)}%`;
}

export function KpiCard({ label, value, availability, comparison }: KpiCardProps) {
  return (
    <div className="bg-white border border-gray-200 rounded-xl p-5 flex flex-col gap-3">
      <div className="flex items-start justify-between gap-2">
        <p className="text-sm font-medium text-gray-500">{label}</p>
        <AvailabilityBadge availability={availability} />
      </div>

      <p className="text-2xl font-bold text-gray-900">{value}</p>

      {comparison && availability === 'available' && (
        <p className={`text-xs font-medium ${comparison.positive === false ? 'text-red-600' : 'text-green-600'}`}>
          {comparison.label}: {formatComparison(comparison.value)}
        </p>
      )}
    </div>
  );
}
