/**
 * Tests for the LoadingState component
 * @jest-environment jsdom
 */

import React from 'react';
import { render } from '@testing-library/react';
import { LoadingState } from '@/components/ui/LoadingState';

describe('LoadingState', () => {
  it('should render page type by default', () => {
    const { container } = render(<LoadingState />);
    expect(container.querySelector('.p-8')).toBeInTheDocument();
  });

  it('should render card type skeleton', () => {
    const { container } = render(<LoadingState type="card" />);
    expect(container.querySelector('.h-32')).toBeInTheDocument();
    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
  });

  it('should render table type skeleton', () => {
    const { container } = render(<LoadingState type="table" />);
    expect(container.querySelector('.h-10')).toBeInTheDocument();
    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
  });

  it('should render table type with custom rows', () => {
    const { container } = render(<LoadingState type="table" rows={6} />);
    const rowElements = container.querySelectorAll('.h-12');
    expect(rowElements).toHaveLength(6);
  });

  it('should render list type skeleton', () => {
    const { container } = render(<LoadingState type="list" />);
    expect(container.querySelector('.rounded-full')).toBeInTheDocument();
    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
  });

  it('should render list type with custom rows', () => {
    const { container } = render(<LoadingState type="list" rows={3} />);
    const avatars = container.querySelectorAll('.rounded-full');
    expect(avatars).toHaveLength(3);
  });

  it('should render page type with default columns', () => {
    const { container } = render(<LoadingState type="page" />);
    const cards = container.querySelectorAll('.h-32');
    expect(cards).toHaveLength(4);
  });

  it('should render page type with custom columns', () => {
    const { container } = render(<LoadingState type="page" columns={6} />);
    const cards = container.querySelectorAll('.h-32');
    expect(cards).toHaveLength(6);
  });

  it('should have animate-pulse class for card type', () => {
    const { container } = render(<LoadingState type="card" />);
    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
  });

  it('should have animate-pulse class for table type', () => {
    const { container } = render(<LoadingState type="table" />);
    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
  });

  it('should have animate-pulse class for list type', () => {
    const { container } = render(<LoadingState type="list" />);
    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
  });

  it('should have animate-pulse class for page type', () => {
    const { container } = render(<LoadingState type="page" />);
    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
  });

  it('should render with rounded corners for card type', () => {
    const { container } = render(<LoadingState type="card" />);
    expect(container.querySelector('.rounded-lg')).toBeInTheDocument();
  });

  it('should render with gray backgrounds', () => {
    const { container } = render(<LoadingState type="card" />);
    expect(container.querySelector('.bg-gray-200')).toBeInTheDocument();
  });

  it('should default to 4 rows for table type', () => {
    const { container } = render(<LoadingState type="table" />);
    const rowElements = container.querySelectorAll('.h-12');
    expect(rowElements).toHaveLength(4);
  });

  it('should default to 4 rows for list type', () => {
    const { container } = render(<LoadingState type="list" />);
    const avatars = container.querySelectorAll('.rounded-full');
    expect(avatars).toHaveLength(4);
  });
});