import React from 'react'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom'
import Spinner from './index'

describe('Spinner component', () => {
  it('should render correctly when loading is true', () => {
    const { container } = render(<Spinner loading={true} />)
    const spinner = container.firstChild as HTMLElement

    expect(spinner).toHaveClass('animate-spin')

    // Check for accessibility text
    const screenReaderText = spinner.querySelector('span')
    expect(screenReaderText).toBeInTheDocument()
    expect(screenReaderText).toHaveTextContent('Loading...')
  })

  it('should be hidden when loading is false', () => {
    const { container } = render(<Spinner loading={false} />)
    const spinner = container.firstChild as HTMLElement

    expect(spinner).toHaveClass('hidden')
  })

  it('should render with custom className', () => {
    const customClass = 'text-blue-500'
    const { container } = render(<Spinner loading={true} className={customClass} />)
    const spinner = container.firstChild as HTMLElement

    expect(spinner).toHaveClass(customClass)
  })

  it('should render children correctly', () => {
    const childText = 'Child content'
    const { getByText } = render(
      <Spinner loading={true}>{childText}</Spinner>,
    )

    expect(getByText(childText)).toBeInTheDocument()
  })

  it('should use default loading value (false) when not provided', () => {
    const { container } = render(<Spinner />)
    const spinner = container.firstChild as HTMLElement

    expect(spinner).toHaveClass('hidden')
  })
})