import cc from 'classcat';

interface BadgeProps {
  as?: keyof JSX.IntrinsicElements;
  color?: 'orange' | 'gray' | 'blue' | 'green' | 'yellow' | 'red';
  bold?: boolean;
  uppercase?: boolean;
  className?: string;
  style?: React.CSSProperties;
  title?: string;
  children: React.ReactNode;
}

export const Badge = ({
  as: Element = 'span',
  color = 'green',
  bold,
  uppercase,
  className,
  style,
  title,
  children,
}: BadgeProps) => {
  return (
    <Element
      className={cc([
        `mark--${color}`,
        'paddingX2 rounded2 truncate',
        { bold, ttu: uppercase },
        className,
      ])}
      style={style}
      title={title}
    >
      {children}
    </Element>
  );
};