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

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

    const skeleton = container.firstChild as HTMLElement;
    expect(skeleton).toBeInTheDocument();
    expect(skeleton).toHaveAttribute('aria-hidden', 'true');
  });

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

    const skeleton = container.firstChild as HTMLElement;
    expect(skeleton).toHaveClass('rounded-lg');
  });

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

    const skeleton = container.firstChild as HTMLElement;
    expect(skeleton).toHaveClass('rounded-full');
  });

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

    const skeleton = container.firstChild as HTMLElement;
    expect(skeleton).toHaveClass('rounded');
  });

  it('should render with shimmer animation by default', () => {
    const { container } = render(<Skeleton />);

    const skeleton = container.firstChild as HTMLElement;
    // The skeleton uses a shimmer overlay via CSS class
    const shimmer = skeleton?.querySelector('.skeleton-shimmer');
    expect(shimmer).toBeInTheDocument();
  });

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

    const skeleton = container.firstChild as HTMLElement;
    expect(skeleton).toHaveStyle({ width: '200px' });
  });

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

    const skeleton = container.firstChild as HTMLElement;
    expect(skeleton).toHaveStyle({ height: '100px' });
  });

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

    const skeleton = container.firstChild as HTMLElement;
    expect(skeleton).toHaveStyle({ width: '300px', height: '150px' });
  });

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

    const skeleton = container.firstChild as HTMLElement;
    expect(skeleton).toHaveClass('custom-class');
  });

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

    const skeleton = container.firstChild as HTMLElement;
    expect(skeleton).toHaveAttribute('aria-hidden', 'true');
  });

  it('should have base styling classes', () => {
    const { container } = render(<Skeleton />);

    const skeleton = container.firstChild as HTMLElement;
    expect(skeleton).toHaveClass('bg-muted/50');
  });
});