MetricsCard.tsx

/**
 * Metrics card component - displays a single metric value.
 */

interface MetricsCardProps {
  title: string;
  value: number;
  unit?: string;
  decimals?: number;
  compact?: boolean;
}

export default function MetricsCard({
  title,
  value,
  unit,
  decimals = 0,
  compact = false,
}: MetricsCardProps) {
  const formattedValue = value.toFixed(decimals);

  if (compact) {
    return (
      <div className="bg-gray-50 border border-gray-200 rounded-md p-2">
        <div className="text-xs text-gray-600 mb-1">{title}</div>
        <div className="text-sm font-mono font-semibold text-gray-900">
          {formattedValue}
          {unit && <span className="text-xs text-gray-500 ml-1">{unit}</span>}
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
      <div className="text-sm text-gray-600 mb-2">{title}</div>
      <div className="text-2xl font-mono font-bold text-gray-900">
        {formattedValue}
        {unit && <span className="text-sm text-gray-500 ml-2">{unit}</span>}
      </div>
    </div>
  );
}