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

describe('ErrorState', () => {
  it('uses the title as the accessible heading name', () => {
    render(<ErrorState title="Page not found" />)
    expect(screen.getByRole('heading', { name: 'Page not found' })).toBeTruthy()
  })

  it('renders code, message, and an action slot', () => {
    render(<ErrorState code={404} title="Not found" message="No such page." action={<a href="/">Home</a>} />)
    expect(screen.getByText('404')).toBeTruthy()
    expect(screen.getByText('No such page.')).toBeTruthy()
    expect(screen.getByRole('link', { name: 'Home' })).toBeTruthy()
  })

  it('inline variant is left-aligned (items-start text-start), page variant is centered', () => {
    const { container: inlineEl } = render(<ErrorState variant="inline" title="Oops" />)
    const inlineDiv = inlineEl.firstElementChild as HTMLElement
    expect(inlineDiv.className).toContain('items-start')
    expect(inlineDiv.className).toContain('text-start')
    expect(inlineDiv.className).not.toContain('items-center')
    const { container: pageEl } = render(<ErrorState variant="page" title="Oops" />)
    const pageDiv = pageEl.firstElementChild as HTMLElement
    expect(pageDiv.className).toContain('items-center')
    expect(pageDiv.className).toContain('text-center')
  })

  it('marks the visual slot decorative (aria-hidden) by default (edge: 503 maintenance)', () => {
    const { container } = render(
      <ErrorState code={503} title="Down for maintenance" visual={<svg data-testid="art" />} />,
    )
    const hidden = container.querySelector('[aria-hidden="true"]')
    expect(hidden).toBeTruthy()
    expect(hidden?.querySelector('[data-testid="art"]')).toBeTruthy()
  })
})