import { render, screen } from '@testing-library/react'
import { StatusBadge } from '../badge/StatusBadge'

type TestStatus = 'active' | 'inactive' | 'pending'

const testConfig: Record<TestStatus, { label: string; className: string }> = {
  active: {
    label: 'Active',
    className: 'bg-green-100 text-green-700',
  },
  inactive: {
    label: 'Inactive',
    className: 'bg-gray-100 text-gray-700',
  },
  pending: {
    label: 'Pending',
    className: 'bg-yellow-100 text-yellow-700',
  },
}

describe('StatusBadge', () => {
  it('renders the correct label for a given status', () => {
    render(
      <StatusBadge<TestStatus>
        status="active"
        config={testConfig}
      />
    )
    expect(screen.getByText('Active')).toBeInTheDocument()
  })

  it('applies the correct className for a given status', () => {
    render(
      <StatusBadge<TestStatus>
        status="inactive"
        config={testConfig}
      />
    )
    const badge = screen.getByText('Inactive')
    expect(badge).toHaveClass('bg-gray-100')
    expect(badge).toHaveClass('text-gray-700')
  })

  it('renders each status correctly', () => {
    const { rerender } = render(
      <StatusBadge<TestStatus> status="active" config={testConfig} />
    )
    expect(screen.getByText('Active')).toBeInTheDocument()

    rerender(
      <StatusBadge<TestStatus> status="pending" config={testConfig} />
    )
    expect(screen.getByText('Pending')).toBeInTheDocument()
    expect(screen.getByText('Pending')).toHaveClass('bg-yellow-100')
  })

  it('renders raw status string for unknown status', () => {
    render(
      <StatusBadge
        status="unknown"
        config={testConfig as Record<string, { label: string; className: string }>}
      />
    )
    expect(screen.getByText('unknown')).toBeInTheDocument()
    expect(screen.getByText('unknown')).toHaveClass('bg-gray-100')
  })

  it('applies sm size class', () => {
    render(
      <StatusBadge<TestStatus>
        status="active"
        config={testConfig}
        size="sm"
      />
    )
    const badge = screen.getByText('Active')
    expect(badge).toHaveClass('px-2')
  })

  it('applies md size class by default', () => {
    render(
      <StatusBadge<TestStatus>
        status="active"
        config={testConfig}
      />
    )
    const badge = screen.getByText('Active')
    expect(badge).toHaveClass('px-2.5')
  })

  it('applies custom className', () => {
    render(
      <StatusBadge<TestStatus>
        status="active"
        config={testConfig}
        className="custom-badge"
      />
    )
    expect(screen.getByText('Active')).toHaveClass('custom-badge')
  })
})