/**
 * SSELiveBadge — small dot + label badge reflecting SSE connection state.
 * @countermeasure-platform/web-components/primitives/sse-live-badge
 *
 * Pairs with the `useSSE` hook (`/services/sse-react`).
 * `connected: true`  → green dot + "Live"
 * `connected: false` → amber pulsing dot + "Reconnecting..."
 */

import * as React from 'react'
import { cn } from '../react/primitives/utils'

export interface SSELiveBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  connected: boolean
  connectedLabel?: string
  reconnectingLabel?: string
}

export function SSELiveBadge({
  connected,
  connectedLabel = 'Live',
  reconnectingLabel = 'Reconnecting…',
  className,
  ...rest
}: SSELiveBadgeProps) {
  const label = connected ? connectedLabel : reconnectingLabel

  return (
    <span
      data-slot="sse-live-badge"
      data-connected={connected ? 'true' : 'false'}
      role="status"
      aria-live="polite"
      className={cn(
        'inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium',
        connected
          ? 'border-success/30 bg-success/10 text-success'
          : 'border-warning/30 bg-warning/10 text-warning',
        className
      )}
      {...rest}
    >
      <span
        aria-hidden
        className={cn(
          'h-1.5 w-1.5 rounded-full',
          connected ? 'bg-success' : 'animate-pulse bg-warning'
        )}
      />
      {label}
    </span>
  )
}
