import { ReactNode } from 'react';
import { RtTypographyIconProps } from './create-icon.types';
import classnames from 'classnames/bind';
import styles from '../styles/rt-typography-icons.module.css';
// eslint-disable-next-line @nx/enforce-module-boundaries
import { _V_PREFIX_ } from '../../../../../../tools/constants';

const cn = classnames.bind(styles);

export const createIcon = (svgNode: () => ReactNode) => {
  return ({
    typography,
    scale = 'default',
    specification = 'main',
  }: RtTypographyIconProps) => {
    return (
      <span
        role="img"
        className={cn(
          'rt-typography-icon',
          `${_V_PREFIX_}-${typography}-${scale}`,
          `rt-typography-icon--color-${specification}`
        )}
      >
        {svgNode()}
      </span>
    );
  };
};