// @flow
import { type StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import { getSpacingRules } from '../../../mixins/spacing';
import { getFontFamily, getFontWeight } from '../../../mixins/typography';
import { getBackground, getForegroundColor } from './tag.css-rules';
import type { TagProps } from './tag.proptypes';
import { Span } from '../../typography';

export const Tag: StatelessFunctionalComponent<TagProps> = styled(Span).attrs(
  () => ({
    bold: true,
  }),
)`
  background: ${getBackground};
  display: inline-block;
  border-radius: 2px;
  color: ${getForegroundColor};
  font-size: 12px;
  font-family: ${getFontFamily};
  font-weight: ${getFontWeight};
  line-height: 1;
  padding: 4px 10px;
  text-align: center;
  ${getSpacingRules};
`;

Tag.displayName = 'Tag';
