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

const NOMBRES: IconoNombre[] = [
  'inmersion',
  'desafiar',
  'estrategia',
  'escribeme',
  'diagnostico',
  'plan',
  'comunicacion',
  'digital',
  'experiencias',
];

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

  it.each(NOMBRES)('renders a non-empty svg for "%s"', (nombre) => {
    const { container } = render(<Icono nombre={nombre} />);
    const svg = container.querySelector('svg');
    expect(svg?.children.length).toBeGreaterThan(0);
  });

  it('takes its colour from currentColor via className, not a hardcoded fill', () => {
    const { container } = render(<Icono nombre="plan" className="text-dorado" />);
    expect(container.querySelector('svg')).toHaveAttribute('stroke', 'currentColor');
    expect(container.querySelector('svg')).toHaveClass('text-dorado');
  });
});