import React, { FC } from 'react';

import { bem } from 'utils/bem';

import styles from './icon.scss';

const iconClassName = bem(styles, 'icon');

export enum ICON_SIZE {
  small = 'small',
  medium = 'medium',
  large = 'large',
}

export interface IIconProps {
  name: string;
  size?: ICON_SIZE;
  className?: string;
  id?: string;
  dataAttributes?: Record<`data-${string}`, string>;
}

export const Icon: FC<IIconProps> = ({ name, size = ICON_SIZE.small, className, id, dataAttributes }) => {
  const iconNameClassName = `icon-${name}`;

  const additionalClasses = className ? [iconNameClassName, className] : iconNameClassName;

  return (
    <span
      {...dataAttributes}
      id={id}
      className={iconClassName(null, { [size]: true }, additionalClasses)}
    />
  );
};