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

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

FieldLabel.displayName = 'FieldLabel';
