import React from 'react';
import { render } from '@testing-library/react';
import { expect } from 'vitest';

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).toBeTruthy();

      // Check if styles are applied either via style attribute or CSS class
      const element = container.firstChild as HTMLElement | SVGElement;
      const hasStyleAttr = element.style.height === '16px' && element.style.width === '16px';
      const elementClass = element.getAttribute('class') || '';
      const hasClassName = elementClass.includes('sc-'); // styled-components class

      expect(hasStyleAttr || hasClassName).toBeTruthy();
    },

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

      const svgElement = container.querySelector('svg');
      expect(svgElement).toBeTruthy();

      const element = container.firstChild as HTMLElement | SVGElement;
      const pathElement = container.querySelector('path') as SVGPathElement;

      // Check if size styles are applied either via style attribute or CSS class
      const hasSizeStyle = element.style.height === '24px' && element.style.width === '24px';
      const elementClass = element.getAttribute('class') || '';
      const hasClassName = elementClass.includes('sc-'); // styled-components class

      expect(hasSizeStyle || hasClassName).toBeTruthy();

      // Check if color is applied either via style attribute or CSS class
      const hasColorStyle =
        pathElement.getAttribute('style')?.includes('fill: var(--color-primary)') ||
        pathElement.getAttribute('fill') === 'var(--color-primary)' ||
        elementClass.includes('sc-'); // check styled-components class on the root element

      expect(hasColorStyle).toBeTruthy();
    },

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