interface HeadRingProps {
  headIds: string[]
  activeHeads: string[]
}

export function HeadRing({ headIds, activeHeads }: HeadRingProps) {
  const n = headIds.length
  const radius = 80

  return (
    <div className="head-ring">
      <svg viewBox="-120 -120 240 240" className="head-ring-svg">
        {headIds.map((id, i) => {
          const angle = (2 * Math.PI * i) / n - Math.PI / 2
          const x = radius * Math.cos(angle)
          const y = radius * Math.sin(angle)
          const isActive = activeHeads.includes(id)
          return (
            <g key={id} transform={`translate(${x}, ${y})`}>
              <circle r="12" className={`head-glyph ${isActive ? "active" : ""}`} data-head={id} />
              <text y="4" textAnchor="middle" fontSize="8" fill="currentColor">
                {id.slice(0, 2)}
              </text>
            </g>
          )
        })}
      </svg>
    </div>
  )
}