import '../styles/collab-indicator.css'

interface CollabIndicatorProps {
  connected: boolean
  peerCount: number
}

export function CollabIndicator({ connected, peerCount }: CollabIndicatorProps) {
  if (!connected && peerCount === 0) return null

  return (
    <div className="collab-indicator" title={connected ? `${peerCount + 1} users online` : 'Connecting...'}>
      <span className={`collab-dot ${connected ? 'connected' : 'connecting'}`} />
      {peerCount > 0 && (
        <span className="collab-count">{peerCount + 1}</span>
      )}
    </div>
  )
}
