import styles from './index.module.scss';
import { Icon as CMSIcon } from '@hubspot/cms-components';
import ContentFields from './ContentFields.js';
import cx from '../utils/classname.js';
import type { CSSVariables } from '../utils/types.js';
import { IconProps } from './types.js';

const IconComponent = ({
  fieldPath,
  showIcon = true,
  size = 12,
  className = '',
  style = {},
  purpose = 'DECORATIVE',
  title = '',
  fill,
}: IconProps) => {
  if (!showIcon) return null;

  const defaultClasses = styles.icon;
  const combinedClasses = cx(defaultClasses, className);

  const cssVariables: CSSVariables = {
    '--hscl-icon-size': `${size}px`,
    ...(fill && { '--hscl-icon-fill': fill }),
  };

  return (
    <CMSIcon
      fieldPath={fieldPath}
      height={size}
      className={combinedClasses}
      style={{ ...cssVariables, ...style }}
      purpose={purpose}
      title={title}
    />
  );
};

type IconComponentType = typeof IconComponent & {
  ContentFields: typeof ContentFields;
};

const Icon = IconComponent as IconComponentType;
Icon.ContentFields = ContentFields;

export default Icon;
