/* eslint-disable react/jsx-props-no-spreading */
import React, { FunctionComponent } from 'react';

import omit from 'lodash/omit';

import { StyledBadge } from './styled-component';
import { useTheme } from '../Theme';
import { BadgeProps } from './types.d';

export const Badge: FunctionComponent<BadgeProps> = (props): React.ReactElement => {
  const { color = 'error', children, size = 'medium', textColor, overlap = 'rectangular' } = props;
  const theme = useTheme();

  const badgeSize = {
    small: 0.7,
    medium: 0.85,
    big: 1,
  }[size];

  return (
    <StyledBadge
      $theme={theme}
      $color={color}
      $size={badgeSize}
      $textColor={textColor}
      {...omit(props, 'textColor', 'overlap', 'size', 'color')}
      overlap={overlap}
      color="default"
    >
      {children}
    </StyledBadge>
  );
};
