// @flow
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 type { PatchworkComponent } from '../../../types';
import { Span } from '../../typography';

export const Tag: PatchworkComponent<TagProps> = styled(Span).attrs(props => ({
  style: getSpacingRules(props),
  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;
`;

Tag.displayName = 'Tag';
