import { clsx } from 'clsx'

type Status = 'running' | 'stopped' | 'unknown'

const statusStyles: Record<Status, string> = {
  running: 'bg-green-500/20 text-green-400 border-green-500/30',
  stopped: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
  unknown: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
}

interface StatusBadgeProps {
  status: Status
  label?: string
}

export function StatusBadge({ status, label }: StatusBadgeProps) {
  return (
    <span
      className={clsx(
        'inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border',
        statusStyles[status]
      )}
    >
      <span className={clsx(
        'w-1.5 h-1.5 rounded-full',
        status === 'running' && 'bg-green-400 animate-pulse',
        status === 'stopped' && 'bg-gray-400',
        status === 'unknown' && 'bg-yellow-400 animate-pulse'
      )} />
      {label || status}
    </span>
  )
}