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

describe('Skeleton', () => {
  it('renders base skeleton with animate-pulse', () => {
    const { container } = render(<Skeleton />);
    expect(container.firstChild).toHaveClass('animate-pulse');
  });

  it('base skeleton has aria-hidden', () => {
    const { container } = render(<Skeleton />);
    expect(container.firstChild).toHaveAttribute('aria-hidden');
  });

  it('Skeleton.Row renders row placeholder', () => {
    const { container } = render(<Skeleton.Row />);
    expect(container.firstChild).toHaveAttribute('aria-hidden');
    // Should have multiple skeleton blocks
    expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0);
  });

  it('Skeleton.Card renders card placeholder', () => {
    const { container } = render(<Skeleton.Card />);
    expect(container.firstChild).toHaveAttribute('aria-hidden');
  });

  it('Skeleton.Table renders header and default 5 rows', () => {
    const { container } = render(<Skeleton.Table />);
    expect(container.firstChild).toHaveAttribute('aria-hidden');
    // header + 5 rows = 6 row-like blocks; just check children exist
    expect(container.children.length).toBeGreaterThan(0);
  });

  it('Skeleton.Table renders custom row count', () => {
    const { container } = render(<Skeleton.Table rows={3} />);
    // container.firstChild has header div + 3 SkeletonRow children
    const el = container.firstChild as HTMLElement;
    // header + 3 rows
    expect(el.children.length).toBe(4);
  });

  it('merges custom className on base', () => {
    render(<Skeleton data-testid="sk" className="h-10" />);
    expect(screen.getByTestId('sk')).toHaveClass('h-10');
  });
});