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

import { CompetitorComparisonTable } from './CompetitorComparisonTable';

describe('CompetitorComparisonTable', () => {
  it('renders the comparison table with section heading', () => {
    render(<CompetitorComparisonTable />);
    expect(screen.getByText('How RankWiz Compares')).toBeInTheDocument();
  });

  it('renders BYOK row with "Unique to RankWiz" badge', () => {
    render(<CompetitorComparisonTable />);
    expect(screen.getByText('Bring Your Own AI Key (BYOK)')).toBeInTheDocument();
    // The row is highlighted so it shows the "Unique to RankWiz" badge
    expect(screen.getAllByText('Unique to RankWiz').length).toBeGreaterThan(0);
  });

  it('shows BYOK as included for RankWiz and not included for competitors', () => {
    render(<CompetitorComparisonTable />);

    // BYOK row: RankWiz has CheckCircle2 (aria-label "Included"), competitors have X (aria-label "Not included")
    const includedIcons = screen.getAllByLabelText('Included');
    const notIncludedIcons = screen.getAllByLabelText('Not included');

    // Verify the table renders both types of icons
    expect(includedIcons.length).toBeGreaterThan(0);
    expect(notIncludedIcons.length).toBeGreaterThan(0);
  });

  it('uses custom proPrice prop in monthly price row', () => {
    render(<CompetitorComparisonTable proPrice={49} />);
    expect(screen.getByText('$49')).toBeInTheDocument();
  });

  it('renders full comparison link', () => {
    render(<CompetitorComparisonTable />);
    const link = screen.getByText('Full comparison →');
    expect(link.closest('a')).toHaveAttribute('href', '/compare');
  });
});