import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { Icon } from './icon';

@Component({
  selector: 'lib-icon-test-host',
  imports: [Icon],
  template: `<lib-icon [name]="name" [size]="size" [strokeWidth]="strokeWidth" />`,
})
class IconTestHost {
  name: 'home' | 'bell' = 'home';
  size = 20;
  strokeWidth = 1.5;
}

describe('Icon', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({ imports: [IconTestHost] }).compileComponents();
  });

  it('renders a lucide <svg> for the given name', async () => {
    const fixture = TestBed.createComponent(IconTestHost);
    await fixture.whenStable();
    const svg = fixture.nativeElement.querySelector('lib-icon svg') as SVGElement | null;
    expect(svg).not.toBeNull();
    expect(svg?.classList.contains('lucide')).toBe(true);
  });

  it('marks the lucide host as decorative (aria-hidden)', async () => {
    const fixture = TestBed.createComponent(IconTestHost);
    await fixture.whenStable();
    const host = fixture.nativeElement.querySelector(
      'lib-icon lucide-angular',
    ) as HTMLElement | null;
    expect(host?.getAttribute('aria-hidden')).toBe('true');
  });

  it('propagates size and strokeWidth to the underlying <svg>', async () => {
    const fixture = TestBed.createComponent(IconTestHost);
    fixture.componentInstance.size = 32;
    fixture.componentInstance.strokeWidth = 2;
    fixture.detectChanges();
    await fixture.whenStable();
    const svg = fixture.nativeElement.querySelector('lib-icon svg') as SVGElement | null;
    expect(svg?.getAttribute('width')).toBe('32');
    expect(svg?.getAttribute('height')).toBe('32');
    expect(svg?.getAttribute('stroke-width')).toBe('2');
  });
});
