import { defineComponent, markRaw, type Component } from 'vue';

/**
 * Creates a mock icon component for testing.
 * Uses `markRaw` to prevent Vue from making it reactive.
 * @param testId - The data-testid attribute value for the icon
 * @returns A Vue component that renders an SVG with the specified testId
 * @example
 * ```ts
 * import { createMockIcon } from '@/__tests__/test-utils';
 *
 * const MockIcon = createMockIcon('my-icon');
 *
 * render(UiButton, {
 *   props: { startIcon: MockIcon },
 *   slots: { default: 'Button' },
 * });
 *
 * expect(getByTestId('my-icon')).toBeInTheDocument();
 * ```
 */
export function createMockIcon(testId = 'mock-icon'): Component {
  return markRaw(
    defineComponent({
      name: 'MockIcon',
      template: `<svg data-testid="${testId}" aria-hidden="true" />`,
    }),
  );
}

/**
 * A pre-configured mock icon component with data-testid="mock-icon".
 * Uses `markRaw` to prevent Vue from making it reactive.
 * @example
 * ```ts
 * import { MockIcon } from '@/__tests__/test-utils';
 *
 * render(UiButton, {
 *   props: { startIcon: MockIcon },
 *   slots: { default: 'Button' },
 * });
 *
 * expect(getByTestId('mock-icon')).toBeInTheDocument();
 * ```
 */
export const MockIcon = createMockIcon('mock-icon');
