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

describe('FeatureCardSkeleton', () => {
  it('renders the icon, title and badge skeletons in the header', () => {
    const { container } = render(<FeatureCardSkeleton />);
    expect(container.querySelector('[data-slot="card-header"]')).toBeInTheDocument();
    expect(container.querySelector('.size-10.rounded-\\[var\\(--radius\\)\\]')).toBeInTheDocument();
  });

  it('renders three description line skeletons in the content', () => {
    const { container } = render(<FeatureCardSkeleton />);
    const contentSkeletons = container.querySelectorAll(
      '[data-slot="card-content"] [data-slot="skeleton"]'
    );
    expect(contentSkeletons).toHaveLength(3);
  });

  it('renders the footer action button skeleton by default (showAction is true)', () => {
    const { container } = render(<FeatureCardSkeleton />);
    expect(container.querySelector('[data-slot="card-footer"]')).toBeInTheDocument();
  });

  it('hides the footer action button skeleton when showAction is false', () => {
    const { container } = render(<FeatureCardSkeleton showAction={false} />);
    expect(container.querySelector('[data-slot="card-footer"]')).not.toBeInTheDocument();
  });

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