/**
 * F-147 — AvailabilityBadge component.
 * Shows a colored badge indicating whether a metric is available.
 */

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

const LABELS: Record<Availability, { label: string; className: string }> = {
  available: { label: 'Disponible', className: 'bg-green-100 text-green-800' },
  unavailable: { label: 'No disponible', className: 'bg-gray-100 text-gray-500' },
};

interface AvailabilityBadgeProps {
  availability: Availability;
  label?: string;
}

export function AvailabilityBadge({ availability, label }: AvailabilityBadgeProps) {
  const { label: badgeLabel, className } = LABELS[availability];
  return (
    <span
      title={availability === 'unavailable' ? 'Esta métrica aún no está disponible con los datos actuales' : undefined}
      className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium ${className}`}
    >
      {availability === 'available' ? (
        <span className="text-green-600" aria-hidden>✓</span>
      ) : (
        <span className="text-gray-400" aria-hidden>✗</span>
      )}
      {label ?? badgeLabel}
    </span>
  );
}
