/**
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import * as React from 'react';
import { Chip } from '@material-ui/core';
import { withStyles } from '@material-ui/core';
import { COLORS, BASE_FONT } from '../styles';

interface BadgeProps {
  value?: string;
}

const StyledChip = withStyles({
  root: {
    color: COLORS.white,
    backgroundColor: COLORS.inverse,
    borderRadius: 0,
    fontFamily: BASE_FONT.fontFamily as string,
    fontSize: 10,
    fontWeight: 100,
    paddingLeft: 1,
    paddingRight: 1,
    marginLeft: 4,
    marginRight: 4,
  },
})(Chip);

/** Funtional Component for select fields */
// tslint:disable-next-line:enforce-name-casing
export function Badge(props: BadgeProps) {
  const { value } = props;
  return value ? <StyledChip size="small" label={value.toUpperCase()} /> : null;
}