// SPDX-License-Identifier: GPL-3.0-or-later

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

describe('Skeleton', () => {
  it('renders with default props', () => {
    const { container } = render(<Skeleton />);
    const skeleton = container.firstChild;
    expect(skeleton).toHaveClass('animate-pulse');
    expect(skeleton).toHaveClass('rounded-lg'); // rectangular variant
  });

  it('renders text variant', () => {
    const { container } = render(<Skeleton variant="text" />);
    const skeleton = container.firstChild;
    expect(skeleton).toHaveClass('rounded');
  });

  it('renders circular variant', () => {
    const { container } = render(<Skeleton variant="circular" />);
    const skeleton = container.firstChild;
    expect(skeleton).toHaveClass('rounded-full');
  });

  it('applies custom width and height', () => {
    const { container } = render(<Skeleton width={100} height={50} />);
    const skeleton = container.firstChild as HTMLElement;
    expect(skeleton.style.width).toBe('100px');
    expect(skeleton.style.height).toBe('50px');
  });

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

  it('renders multiple lines for text variant', () => {
    const { container } = render(<Skeleton variant="text" lines={3} />);
    const lines = container.querySelectorAll('.animate-pulse');
    expect(lines).toHaveLength(3);
  });
});

describe('CardSkeleton', () => {
  it('renders card structure', () => {
    const { container } = render(<CardSkeleton />);
    expect(container.firstChild).toHaveClass('bg-white');
    expect(container.firstChild).toHaveClass('rounded-xl');
  });

  it('applies custom className', () => {
    const { container } = render(<CardSkeleton className="h-48" />);
    expect(container.firstChild).toHaveClass('h-48');
  });
});

describe('StatCardSkeleton', () => {
  it('renders stat card structure', () => {
    const { container } = render(<StatCardSkeleton />);
    expect(container.firstChild).toHaveClass('bg-white');
    expect(container.firstChild).toHaveClass('rounded-xl');
  });
});

describe('ListItemSkeleton', () => {
  it('renders list item structure', () => {
    const { container } = render(<ListItemSkeleton />);
    const wrapper = container.firstChild;
    expect(wrapper).toHaveClass('flex');
    expect(wrapper).toHaveClass('items-center');
  });
});

describe('PageHeaderSkeleton', () => {
  it('renders page header structure', () => {
    const { container } = render(<PageHeaderSkeleton />);
    expect(container.firstChild).toHaveClass('mb-6');
  });
});
