import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';

function Badge(props) {
  const { color } = props;
  if (props.number === 0) return null;

  const content = (
    <div
      className={classNames(
        `bg-${color}-500 flex items-center rounded-xl px-1 py-0.5 leading-none text-white`,
        `border border-opacity-50 border-${color}-600`,
        { 'cursor-not-allowed': !props.to }
      )}
    >
      <span className='m-1 text-xs font-medium'>{props.text}</span>
      <span className={`bg-white text-xs text-${color}-700 m-1 rounded-xl py-0.5 px-1`}>
        {props.number}
      </span>
    </div>
  );

  if (!props.to) return content;
  return <Link to={props.to}>{content}</Link>;
}

Badge.defaultProps = { to: '', color: 'blue' };

Badge.propTypes = {
  text: PropTypes.string.isRequired,
  number: PropTypes.number.isRequired,
  to: PropTypes.string.isRequired,
  color: PropTypes.string.isRequired
};

export default Badge;
