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

describe('Skeleton', () => {
  it('should render skeleton', () => {
    render(<Skeleton />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toBeInTheDocument();
    expect(skeleton).toHaveAttribute('aria-label', 'Chargement...');
  });

  it('should render with default rectangular variant', () => {
    render(<Skeleton />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toHaveClass('rounded');
  });

  it('should render with circular variant', () => {
    render(<Skeleton variant="circular" />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toHaveClass('rounded-full');
  });

  it('should render with text variant', () => {
    render(<Skeleton variant="text" />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toHaveClass('rounded');
  });

  it('should render with pulse animation by default', () => {
    render(<Skeleton />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toHaveClass('animate-pulse');
  });

  it('should render with wave animation', () => {
    render(<Skeleton animation="wave" />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toHaveClass('shimmer');
  });

  it('should render without animation', () => {
    render(<Skeleton animation="none" />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).not.toHaveClass('animate-pulse');
    expect(skeleton).not.toHaveClass('shimmer');
  });

  it('should apply custom width', () => {
    render(<Skeleton width="200px" />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toHaveStyle({ width: '200px' });
  });

  it('should apply custom height', () => {
    render(<Skeleton height="100px" />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toHaveStyle({ height: '100px' });
  });

  it('should apply numeric width and height', () => {
    render(<Skeleton width={300} height={150} />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toHaveStyle({ width: '300px', height: '150px' });
  });

  it('should apply custom className', () => {
    render(<Skeleton className="custom-class" />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toHaveClass('custom-class');
  });

  it('should have accessibility attributes', () => {
    render(<Skeleton />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toHaveAttribute('aria-label', 'Chargement...');

    const srOnly = screen.getByText('Chargement...');
    expect(srOnly).toHaveClass('sr-only');
  });

  it('should have dark mode support', () => {
    render(<Skeleton />);

    const skeleton = screen.getByRole('status');
    expect(skeleton).toHaveClass('dark:bg-gray-700');
  });
});