import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';

export function testIconComponent(IconComponent: React.ComponentType<any>, componentName: string) {
  const dataName = `icons/${componentName}/${componentName}`;

  return {
    rendersCorrectlyWithDefaultProps: () => {
      const { container } = render(<IconComponent />);
      const svgElement = container.querySelector('svg');
      expect(svgElement).toBeInTheDocument();
      expect(container.firstChild).toHaveStyle('height: 16px; width: 16px;');
    },

    appliesCustomSizeAndColor: () => {
      const { container } = render(<IconComponent size="24px" color="--color-primary" />);

      const svgElement = container.querySelector('svg');
      expect(svgElement).toBeInTheDocument();
      expect(container.firstChild).toHaveStyle('height: 24px; width: 24px;');
      const pathElement = container.querySelector('path');
      expect(pathElement).toHaveStyle('fill: var(--color-primary);');
    },

    hasCorrectDataComponentName: () => {
      const { container } = render(<IconComponent />);
      expect(container.firstChild).toHaveAttribute('data-component-name', dataName);
    },
  };
}