import { useServerStore } from '../store/server'

const COLORS: Record<string, string> = {
  '1': '#cc0000',
  '2': '#006600',
  '3': '#0000cc',
}

export function ServerBadge() {
  const servedBy = useServerStore((s) => s.servedBy)
  if (!servedBy) return null

  const bg = COLORS[servedBy] ?? '#444'

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 12,
        right: 12,
        background: bg,
        color: '#fff',
        fontFamily: 'Verdana, Arial, sans-serif',
        fontSize: 11,
        fontWeight: 'bold',
        padding: '4px 10px',
        border: '2px solid #000',
        zIndex: 9999,
        userSelect: 'none',
      }}
    >
      Backend #{servedBy}
    </div>
  )
}
