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

describe('<Seccion />', () => {
  it('renders its content and its number', () => {
    render(<Seccion numero="02" paso={1}>Dónde estás</Seccion>);
    expect(screen.getByText('Dónde estás')).toBeInTheDocument();
    expect(screen.getByText('02')).toBeInTheDocument();
  });

  it('carries its mark at the step it is given', () => {
    const { container } = render(<Seccion numero="06" paso={5}>x</Seccion>);
    // Step 5 resolves the ≡: three of the nine lines stay visible.
    const visibles = Array.from(container.querySelectorAll('line')).filter(
      (l) => l.getAttribute('opacity') !== '0',
    );
    expect(visibles).toHaveLength(3);
  });

  it('uses the manual gold on dark backgrounds, the readable gold on light ones', () => {
    const { container: oscuro } = render(<Seccion numero="03" paso={2} fondo="oscuro">x</Seccion>);
    expect(oscuro.querySelector('svg')?.getAttribute('class')).toContain('text-dorado');
    expect(oscuro.querySelector('svg')?.getAttribute('class')).not.toContain('text-dorado-texto');

    const { container: claro } = render(<Seccion numero="04" paso={3}>x</Seccion>);
    expect(claro.querySelector('svg')?.getAttribute('class')).toContain('text-dorado-texto');
  });

  it('is not announced to screen readers', () => {
    // It is document furniture, not content: the section's own heading
    // already says what it is about.
    const { container } = render(<Seccion numero="05" paso={4}>x</Seccion>);
    expect(container.querySelector('[aria-hidden="true"]')?.textContent).toContain('05');
  });

  it('only becomes an anchor target when it has an id', () => {
    const { container } = render(<Seccion numero="06" paso={5} id="contacto">x</Seccion>);
    const seccion = container.querySelector('section');
    expect(seccion).toHaveAttribute('id', 'contacto');
    expect(seccion?.className).toContain('scroll-mt-24');
  });
});