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

describe('SectionHeading', () => {
  it('renders the title without a description or accent bar by default', () => {
    const { container } = render(<SectionHeading title="Why Xertica AI" />);

    expect(screen.getByRole('heading', { name: 'Why Xertica AI' })).toBeInTheDocument();
    expect(container.querySelector('[aria-hidden="true"]')).not.toBeInTheDocument();
  });

  it('renders the description when provided', () => {
    render(
      <SectionHeading
        title="Why Xertica AI"
        description="We help enterprises adopt AI safely, at scale."
      />
    );

    expect(
      screen.getByText('We help enterprises adopt AI safely, at scale.')
    ).toBeInTheDocument();
  });

  it('renders an accent bar with the matching color token when accentColor is set', () => {
    const { container } = render(<SectionHeading title="Impact" accentColor="success" />);

    const bar = container.querySelector('[aria-hidden="true"]');
    expect(bar).toBeInTheDocument();
    expect(bar).toHaveClass('bg-success');
  });

  it('applies sidebar-tone classes to the title and description', () => {
    render(
      <SectionHeading
        title="Methodology"
        description="A rigorous, repeatable approach."
        tone="sidebar"
      />
    );

    expect(screen.getByRole('heading', { name: 'Methodology' })).not.toHaveClass('text-foreground');
    expect(screen.getByText('A rigorous, repeatable approach.')).toHaveClass(
      'text-sidebar-foreground/70'
    );
  });

  it('applies default-tone classes to the title and description', () => {
    render(
      <SectionHeading title="Methodology" description="A rigorous, repeatable approach." />
    );

    expect(screen.getByRole('heading', { name: 'Methodology' })).toHaveClass('text-foreground');
    expect(screen.getByText('A rigorous, repeatable approach.')).toHaveClass(
      'text-muted-foreground'
    );
  });

  it('applies a custom className to the wrapper', () => {
    const { container } = render(<SectionHeading title="Impact" className="mb-12" />);

    expect(container.firstChild).toHaveClass('mb-12');
  });
});