import clsx from 'clsx'

type Level = 'high' | 'medium' | 'low' | 'safe'

const colors: Record<Level, string> = {
  high: 'bg-danger',
  medium: 'bg-warning',
  low: 'bg-yellow-400',
  safe: 'bg-safe',
}

const labels: Record<Level, string> = {
  high: '🔴',
  medium: '🟡',
  low: '🟡',
  safe: '🟢',
}

export default function Signal({ level, label }: { level: Level; label?: string }) {
  return (
    <span className="inline-flex items-center gap-1.5 text-sm">
      <span className={clsx('w-2 h-2 rounded-full', colors[level])} />
      {label && <span className="text-gray-700">{label}</span>}
      {!label && <span>{labels[level]}</span>}
    </span>
  )
}