import React from "react";
import styled from "styled-components";
import { primaryColor  } from "../../config";

export const Badge = ({
  disabled = false,
  inverted = false,
  children,
  bold = false,
  onClick,
  style,
  className
} : any) => {
  return (
    <BadgeEl  
    className={className + " noselect"} 
    style={style}
    bold={bold}
    onClick={onClick} 
    disabled={disabled} 
    inverted={inverted}>
      {children}
    </BadgeEl>
  );
};
export const BadgeEl = styled.span<{ disabled: boolean; inverted: boolean; bold : boolean}>`
    border-radius: .5em;
    background: ${primaryColor};
    font-size: .8em;
    color: white;
    margin: .2em;
    text-transform: capitalize;
    padding .3em .6em;
    ${(props) => `
    ${props.bold? `font-weight: bolder;` : ''}
    ${ 
      props.inverted
        ? `background: white !important;
        color: ${primaryColor};
        padding .1em .4em;
        border: .2em solid ${primaryColor};
         color: ${primaryColor};`
        : props.disabled
        ? `background: ${"gray"}; 
        color: white;`
        : ""
    }   
    `}`;


export default Badge;