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

describe('Skeleton', () => {
  it('renders rectangular variant by default', () => {
    const { container } = render(<Skeleton />)
    const el = container.firstChild as HTMLElement
    expect(el).toHaveClass('rectangular')
    expect(el).toHaveClass('shimmer')
  })

  it('renders text variant with single bar', () => {
    const { container } = render(<Skeleton variant="text" />)
    const el = container.firstChild as HTMLElement
    expect(el).toHaveClass('text')
    expect(el).toHaveClass('shimmer')
  })

  it('renders circular variant', () => {
    const { container } = render(<Skeleton variant="circular" />)
    const el = container.firstChild as HTMLElement
    expect(el).toHaveClass('circular')
    expect(el).toHaveClass('shimmer')
  })

  it('renders multiple lines for text variant when lines > 1', () => {
    const { container } = render(<Skeleton variant="text" lines={3} />)
    const group = container.firstChild as HTMLElement
    expect(group).toHaveClass('textGroup')
    const bars = group.querySelectorAll('.text')
    expect(bars).toHaveLength(3)
  })

  it('renders last bar at 70% width when lines > 1', () => {
    const { container } = render(<Skeleton variant="text" lines={3} />)
    const group = container.firstChild as HTMLElement
    const bars = group.querySelectorAll('.text')
    const lastBar = bars[bars.length - 1] as HTMLElement
    expect(lastBar.style.width).toBe('70%')
  })

  it('applies custom width and height', () => {
    const { container } = render(<Skeleton variant="rectangular" width={200} height={50} />)
    const el = container.firstChild as HTMLElement
    expect(el.style.width).toBe('200px')
    expect(el.style.height).toBe('50px')
  })

  it('applies custom width and height as strings', () => {
    const { container } = render(<Skeleton variant="circular" width="80px" height="80px" />)
    const el = container.firstChild as HTMLElement
    expect(el.style.width).toBe('80px')
    expect(el.style.height).toBe('80px')
  })

  it('applies extra className', () => {
    const { container } = render(<Skeleton className="custom-class" />)
    const el = container.firstChild as HTMLElement
    expect(el).toHaveClass('custom-class')
  })

  it('circular has default 40x40 dimensions', () => {
    const { container } = render(<Skeleton variant="circular" />)
    const el = container.firstChild as HTMLElement
    expect(el.style.width).toBe('40px')
    expect(el.style.height).toBe('40px')
  })

  it('rectangular has default 80px height and 100% width', () => {
    const { container } = render(<Skeleton variant="rectangular" />)
    const el = container.firstChild as HTMLElement
    expect(el.style.width).toBe('100%')
    expect(el.style.height).toBe('80px')
  })

  it('is aria-hidden', () => {
    const { container } = render(<Skeleton />)
    const el = container.firstChild as HTMLElement
    expect(el).toHaveAttribute('aria-hidden', 'true')
  })
})
