import React from 'react';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Skeleton, SkeletonText } from '@/components/ui/Skeleton';

describe('Skeleton', () => {
  it('renders with role=status', () => {
    render(<Skeleton />);
    expect(screen.getByRole('status')).toBeInTheDocument();
  });

  it('renders with aria-label', () => {
    render(<Skeleton />);
    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Wird geladen');
  });

  it('applies variant classes correctly', () => {
    const { container } = render(<Skeleton variant="circle" />);
    expect(container.firstChild).toHaveClass('rounded-full');
  });

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

describe('SkeletonText', () => {
  it('renders specified number of lines', () => {
    const { container } = render(<SkeletonText lines={3} />);
    const skeletons = container.querySelectorAll('[role="status"]');
    expect(skeletons.length).toBeGreaterThanOrEqual(1);
  });

  it('has role=status for accessibility', () => {
    render(<SkeletonText lines={2} />);
    expect(screen.getAllByRole('status').length).toBeGreaterThan(0);
  });
});
