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

describe('<IlustracionConvergencia />', () => {
  it('is decorative: hidden from assistive tech', () => {
    const { container } = render(<IlustracionConvergencia />);
    const svg = container.querySelector('svg');
    expect(svg).toHaveAttribute('aria-hidden', 'true');
    expect(svg).toHaveAttribute('focusable', 'false');
  });

  it('draws one strand per discipline plus the strategy they serve', () => {
    const { container } = render(<IlustracionConvergencia />);
    expect(container.querySelectorAll('path')).toHaveLength(4);
  });

  it('keeps every stroke within the shared line-art scale', () => {
    const { container } = render(<IlustracionConvergencia />);
    const anchos = Array.from(container.querySelectorAll('path')).map((p) => p.getAttribute('stroke-width'));
    expect(anchos.length).toBeGreaterThan(0);
    anchos.forEach((a) => expect(['1.5', '2', '3']).toContain(a));
  });

  it('lights one strand and dims the rest when a discipline is pointed at', () => {
    const { container } = render(<IlustracionConvergencia activa={1} />);
    const hebras = Array.from(container.querySelectorAll('[data-hebra]'));
    expect(hebras).toHaveLength(3);
    // The point of the highlight is the pairing: the reader has to be able to
    // tell WHICH strand belongs to the card under the cursor. One gold, two
    // faded — if all three stayed grey the drawing would still be decoration.
    const doradas = hebras.filter((h) => (h.getAttribute('class') ?? '').includes('text-dorado'));
    expect(doradas).toHaveLength(1);
    expect(doradas[0].getAttribute('data-hebra')).toBe('1');
    hebras
      .filter((h) => h.getAttribute('data-hebra') !== '1')
      .forEach((h) => expect(h.getAttribute('class') ?? '').toMatch(/text-gris-medio\/35/));
  });

  it('keeps the three strands equal when nothing is pointed at', () => {
    const { container } = render(<IlustracionConvergencia />);
    const hebras = Array.from(container.querySelectorAll('[data-hebra]'));
    hebras.forEach((h) => {
      const cls = h.getAttribute('class') ?? '';
      expect(cls).toContain('text-gris-medio');
      expect(cls).not.toContain('text-dorado');
    });
  });
});