import '@testing-library/jest-dom'

import { render } from '@testing-library/react'
import { axe, toHaveNoViolations } from 'jest-axe'

import { PktHeading } from './Heading'

expect.extend(toHaveNoViolations)

describe('PktHeading', () => {
  test('renders without errors', () => {
    const { container } = render(<PktHeading />)
    expect(container.querySelector('h2')).toBeInTheDocument()
  })

  test('renders with different levels', () => {
    const { container } = render(
      <>
        <PktHeading level={1}>Heading 1</PktHeading>
        <PktHeading level={2}>Heading 2</PktHeading>
        <PktHeading level={3}>Heading 3</PktHeading>
      </>,
    )

    expect(container.querySelector('h1')).toHaveTextContent('Heading 1')
    expect(container.querySelector('h2')).toHaveTextContent('Heading 2')
    expect(container.querySelector('h3')).toHaveTextContent('Heading 3')
  })

  test('applies default size class based on level', () => {
    const { container } = render(<PktHeading level={1}>Heading</PktHeading>)
    expect(container.querySelector('h1')).toHaveClass('pkt-heading--xlarge')
  })

  test('renders with explicit size', () => {
    const { container } = render(<PktHeading size="xlarge">Large Heading</PktHeading>)
    const heading = container.querySelector('h2')
    expect(heading).toHaveClass('pkt-heading--xlarge')
  })

  test('renders with explicit weight', () => {
    const { container } = render(<PktHeading weight="bold">Bold Heading</PktHeading>)
    expect(container.querySelector('h2')).toHaveClass('pkt-heading--fw-bold')
  })

  test('renders with visually hidden prop', () => {
    const { container } = render(<PktHeading visuallyHidden>Hidden Heading</PktHeading>)
    expect(container.querySelector('h2')).toHaveClass('pkt-sr-only')
  })

  test('renders with align prop', () => {
    const { container } = render(<PktHeading align="center">Center Heading</PktHeading>)
    expect(container.querySelector('h2')).toHaveClass('pkt-heading--center')
  })

  test('always carries the pkt-heading base class', () => {
    const { container } = render(<PktHeading>Heading</PktHeading>)
    expect(container.querySelector('h2')).toHaveClass('pkt-heading')
  })

  describe('accessibility', () => {
    it('renders with no wcag errors with axe', async () => {
      const { container } = render(
        <PktHeading level={1} size="large">
          Accessible Heading
        </PktHeading>,
      )
      const results = await axe(container)
      expect(results).toHaveNoViolations()
    })
  })
})