import { EstadoUnidad } from '../types';

interface UnidadStatusBadgeProps {
  estado: EstadoUnidad;
  size?: 'sm' | 'md' | 'lg';
}

const estadoConfig: Record<EstadoUnidad, { label: string; color: string }> = {
  [EstadoUnidad.DISPONIBLE]: { label: 'Disponible', color: 'bg-green-100 text-green-800' },
  [EstadoUnidad.EN_VIAJE]: { label: 'En Viaje', color: 'bg-blue-100 text-blue-800' },
  [EstadoUnidad.EN_RUTA]: { label: 'En Ruta', color: 'bg-yellow-100 text-yellow-800' },
  [EstadoUnidad.EN_TALLER]: { label: 'En Taller', color: 'bg-orange-100 text-orange-800' },
  [EstadoUnidad.BLOQUEADA]: { label: 'Bloqueada', color: 'bg-red-100 text-red-800' },
  [EstadoUnidad.BAJA]: { label: 'Baja', color: 'bg-gray-100 text-gray-800' },
};

const sizeClasses = {
  sm: 'px-2 py-0.5 text-xs',
  md: 'px-2.5 py-1 text-sm',
  lg: 'px-3 py-1.5 text-base',
};

export function UnidadStatusBadge({ estado, size = 'md' }: UnidadStatusBadgeProps) {
  const config = estadoConfig[estado] || { label: estado, color: 'bg-gray-100 text-gray-800' };

  return (
    <span
      className={`inline-flex items-center rounded-full font-medium ${config.color} ${sizeClasses[size]}`}
    >
      {config.label}
    </span>
  );
}