import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import { UiIcon } from '../index';

describe('UiIcon', () => {
  test('renders a Lucide icon by name (kebab-case)', () => {
    const { container } = render(UiIcon, {
      props: { name: 'circle-help' },
    });

    const el = container.querySelector('[data-slot="icon"]');
    expect(el).toBeInTheDocument();
    expect(el?.tagName.toLowerCase()).toBe('svg');
    expect(el).toHaveAttribute('aria-hidden', 'true');
  });

  test('renders a Lucide icon by name (PascalCase)', () => {
    const { container } = render(UiIcon, {
      props: { name: 'CircleHelp' },
    });

    const el = container.querySelector('[data-slot="icon"]');
    expect(el).toBeInTheDocument();
    expect(el?.tagName.toLowerCase()).toBe('svg');
  });

  test('exposes role="img" when ariaLabel is provided', () => {
    const { getByRole } = render(UiIcon, {
      props: { name: 'circle-help', ariaLabel: 'Help' },
    });

    expect(getByRole('img', { name: 'Help' })).toBeInTheDocument();
  });

  test('applies custom size', () => {
    const { container } = render(UiIcon, {
      props: { name: 'star', size: 32 },
    });

    const el = container.querySelector('[data-slot="icon"]');
    expect(el).toHaveAttribute('width', '32');
    expect(el).toHaveAttribute('height', '32');
  });

  test('maps named size tokens to pixels', () => {
    const { container } = render(UiIcon, {
      props: { name: 'star', size: 's' },
    });

    const el = container.querySelector('[data-slot="icon"]');
    expect(el).toHaveAttribute('width', '16');
    expect(el).toHaveAttribute('height', '16');
  });

  test('does not render when icon name is invalid', () => {
    const { container } = render(UiIcon, {
      props: { name: 'non-existent-icon-xyz' },
    });

    const el = container.querySelector('[data-slot="icon"]');
    expect(el).not.toBeInTheDocument();
  });
});
