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

describe('ProjectCardSkeleton', () => {
  it('renders 3 member avatar placeholders by default', () => {
    const { container } = render(<ProjectCardSkeleton />);
    const avatars = container.querySelectorAll('.-space-x-2 > [data-slot="skeleton"]');
    expect(avatars).toHaveLength(3);
  });

  it('renders a custom number of member avatar placeholders', () => {
    const { container } = render(<ProjectCardSkeleton memberCount={2} />);
    const avatars = container.querySelectorAll('.-space-x-2 > [data-slot="skeleton"]');
    expect(avatars).toHaveLength(2);
  });

  it('caps member avatar placeholders at 4 even when memberCount is larger', () => {
    const { container } = render(<ProjectCardSkeleton memberCount={10} />);
    const avatars = container.querySelectorAll('.-space-x-2 > [data-slot="skeleton"]');
    expect(avatars).toHaveLength(4);
  });

  it('renders no member avatars when memberCount is 0', () => {
    const { container } = render(<ProjectCardSkeleton memberCount={0} />);
    const avatars = container.querySelectorAll('.-space-x-2 > [data-slot="skeleton"]');
    expect(avatars).toHaveLength(0);
  });

  it('renders the header, progress bar and due-date skeletons', () => {
    const { container } = render(<ProjectCardSkeleton />);
    expect(container.querySelector('[data-slot="card-header"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="card-footer"]')).toBeInTheDocument();
    // Progress bar skeleton is full width and rounded-full
    expect(container.querySelector('.h-2.w-full.rounded-full')).toBeInTheDocument();
  });

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