import React, { FC } from 'react';

import { bem } from 'utils/bem';

import { BadgeProps, BADGE_TYPE } from './types';
import { THEME } from '../../constants'; // TODO: finish config Rollup to work properly with absolute path

import styles from './badge.scss';

export const badgeClassName = bem(styles, 'badge');

export const Badge: FC<BadgeProps> = ({
  theme = THEME.light,
  className,
  content,
  type = BADGE_TYPE.primary,
  ...htmlAttributes
}): JSX.Element => (
  <span
    className={badgeClassName(null, { [theme]: true, [type]: true }, className)}
    {...htmlAttributes}
  >
    {content}
  </span>
);