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

describe('ProfileCardSkeleton', () => {
  it('renders the avatar and name/role skeletons by default', () => {
    const { container } = render(<ProfileCardSkeleton />);
    // Avatar + 3 text lines (name, role, department) always render
    const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
    expect(skeletons.length).toBeGreaterThan(0);
  });

  it('renders the stats grid (3 columns) when showStats is true (default)', () => {
    const { container } = render(<ProfileCardSkeleton />);
    const statColumns = container.querySelectorAll('.grid-cols-3 > div');
    expect(statColumns).toHaveLength(3);
  });

  it('hides the stats grid when showStats is false', () => {
    const { container } = render(<ProfileCardSkeleton showStats={false} />);
    expect(container.querySelector('.grid-cols-3')).not.toBeInTheDocument();
  });

  it('renders the action buttons row when showActions is true (default)', () => {
    const { container } = render(<ProfileCardSkeleton />);
    // Two flex-1 skeleton buttons in the actions row
    const actionButtons = container.querySelectorAll('.flex-1.rounded-md');
    expect(actionButtons).toHaveLength(2);
  });

  it('hides the action buttons row when showActions is false', () => {
    const { container } = render(<ProfileCardSkeleton showActions={false} />);
    expect(container.querySelectorAll('.flex-1.rounded-md')).toHaveLength(0);
  });

  it('hides both stats and actions when both flags are false', () => {
    const { container } = render(<ProfileCardSkeleton showStats={false} showActions={false} />);
    expect(container.querySelector('.grid-cols-3')).not.toBeInTheDocument();
    expect(container.querySelectorAll('.flex-1.rounded-md')).toHaveLength(0);
  });

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