import React, { HTMLAttributes } from 'react';
import cx from 'classnames';

interface Props extends HTMLAttributes<HTMLSpanElement> {
  badgeColour: string;
  highContrast?: boolean;
}

export function Badge({
  className,
  children,
  badgeColour,
  highContrast,
  ...rest
}: Props) {
  const classes = cx(
    'badge',
    badgeColour,
    { 'high-contrast': highContrast },
    className
  );

  return (
    <span className={classes} {...rest}>
      {children}
    </span>
  );
}

Badge.defaultProps = {
  highContrast: false,
};
