import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'

import { SSELiveBadge } from '../sse-live-badge'

describe('SSELiveBadge', () => {
  it('renders connected label and success styling when connected', () => {
    const { container, getByText } = render(<SSELiveBadge connected />)
    const el = container.querySelector('[data-slot="sse-live-badge"]')
    expect(el).toBeTruthy()
    expect(el?.getAttribute('data-connected')).toBe('true')
    expect(el?.className).toContain('text-success')
    expect(getByText('Live')).toBeTruthy()
  })

  it('renders reconnecting label and warning styling when disconnected', () => {
    const { container, getByText } = render(<SSELiveBadge connected={false} />)
    const el = container.querySelector('[data-slot="sse-live-badge"]')
    expect(el?.getAttribute('data-connected')).toBe('false')
    expect(el?.className).toContain('text-warning')
    expect(getByText('Reconnecting…')).toBeTruthy()
    const dot = el?.querySelector('span[aria-hidden]')
    expect(dot?.className).toContain('animate-pulse')
  })

  it('honors custom labels', () => {
    const { getByText } = render(
      <SSELiveBadge connected connectedLabel="ON-AIR" reconnectingLabel="STAND BY" />
    )
    expect(getByText('ON-AIR')).toBeTruthy()
  })

  it('forwards className and extra props', () => {
    const { container } = render(<SSELiveBadge connected className="custom-llb" data-testid="x" />)
    const el = container.querySelector('[data-slot="sse-live-badge"]')
    expect(el?.className).toContain('custom-llb')
    expect(el?.getAttribute('data-testid')).toBe('x')
  })
})
