// @flow
import styled from 'styled-components';
import type { PatchworkComponent } from '../../../types';
import { getPaletteColor } from '../../../mixins/branding';
import { getSpacingRules } from '../../../mixins/spacing';
import { getHFontFamily } from '../head/head.css-rules';
import { fieldLabelPropTypes } from './field-label.proptypes';
import type { FieldLabelProps } from './field-label.proptypes';
import { getFontSize, getFontWeight } from '../../../mixins/typography';
import { getBottomMargin } from './field-label.css-rules';

export const FieldLabel: PatchworkComponent<FieldLabelProps> = styled.label.attrs(
  props => ({
    style: getSpacingRules(props),
    fontSize: 'f1',
    bold: 'true',
  }),
)`
  display: block;
  margin-bottom: ${getBottomMargin};
  font-size: ${getFontSize};
  font-family: ${getHFontFamily};
  font-weight: ${getFontWeight};
  color: ${getPaletteColor('greyscale-dark')};
`;

FieldLabel.displayName = 'FieldLabel';
FieldLabel.propTypes = fieldLabelPropTypes;
