import styled from 'styled-components';
import { Box } from '../Box';

export interface StatusBadgeProps {
  variant?: 'green' | 'red' | 'yellow' | 'gray' | 'blue' | 'plum';
}

export const StatusBadge = styled(Box)<StatusBadgeProps>`
  display: inline-block;
  margin: 0 0 0 20px;
  padding: 0 15px;
  height: 25px;
  line-height: 25px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  background-color: ${({ variant, theme }) =>
    variant === 'green'
      ? theme.colors.green[2]
      : variant === 'red'
      ? theme.colors.red[1]
      : variant === 'yellow'
      ? theme.colors.yellow[1]
      : variant === 'gray'
      ? theme.colors.gray[4]
      : variant === 'blue'
      ? theme.colors.brandLightest
      : variant === 'plum'
      ? theme.colors.plum[0]
      : theme.colors.gray[4]};
  color: ${({ variant, theme }) =>
    variant === 'green'
      ? theme.colors.green[0]
      : variant === 'red'
      ? theme.colors.red[0]
      : variant === 'yellow'
      ? theme.colors.yellow[2]
      : variant === 'gray'
      ? theme.colors.gray[2]
      : variant === 'blue'
      ? theme.colors.brandMain
      : variant === 'plum'
      ? theme.colors.plum[1]
      : theme.colors.gray[2]};
`;
