const colors = {
  online: 'bg-green-500',
  stale: 'bg-yellow-500',
  offline: 'bg-red-500',
  unknown: 'bg-gray-500',
}

const labels = {
  online: 'Online',
  stale: 'Stale',
  offline: 'Offline',
  unknown: 'Unbekannt',
}

export default function StatusBadge({ status, size = 'sm' }) {
  const dot = colors[status] || colors.unknown
  const label = labels[status] || status

  if (size === 'dot') {
    return (
      <span className={`inline-block w-2 h-2 rounded-full ${dot}`} title={label} />
    )
  }

  return (
    <span className="inline-flex items-center gap-1.5">
      <span className={`w-2 h-2 rounded-full ${dot}`} />
      <span className={`text-xs ${status === 'online' ? 'text-green-400' : status === 'offline' ? 'text-red-400' : 'text-gray-400'}`}>
        {label}
      </span>
    </span>
  )
}
