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

describe('ActivityCardSkeleton', () => {
  it('renders the default number of skeleton rows (5)', () => {
    render(<ActivityCardSkeleton />);
    expect(screen.getAllByRole('listitem')).toHaveLength(5);
  });

  it('renders a custom number of rows', () => {
    render(<ActivityCardSkeleton rows={3} />);
    expect(screen.getAllByRole('listitem')).toHaveLength(3);
  });

  it('renders zero rows when rows is 0', () => {
    render(<ActivityCardSkeleton rows={0} />);
    expect(screen.queryAllByRole('listitem')).toHaveLength(0);
  });

  it('renders the title skeleton plus per-row skeletons (avatar, text, badge)', () => {
    const { container } = render(<ActivityCardSkeleton rows={2} />);
    // 1 title skeleton + 2 rows * 3 skeletons each (avatar, action line, timestamp) + badge... = 1 + 2*4
    const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
    // Title (1) + per row: avatar, action line, timestamp, badge = 4 -> 1 + 2*4 = 9
    expect(skeletons.length).toBe(9);
  });

  it('applies a custom className to the root Card', () => {
    const { container } = render(<ActivityCardSkeleton className="custom-activity" />);
    expect(container.querySelector('[data-slot="card"]')).toHaveClass('custom-activity');
  });

  it('forwards extra props to the root Card element', () => {
    render(<ActivityCardSkeleton data-testid="activity-skeleton" />);
    expect(screen.getByTestId('activity-skeleton')).toBeInTheDocument();
  });
});