// @flow
import React from 'react';
import styled from 'styled-components';
import type { SectionHeaderProps } from './section-header.proptypes';
import type { PatchworkComponent } from '../../../types';
import { getHeaderFontSize } from './section-header.css-rules';
import { getPaletteColor } from '../../../mixins/branding';
import { getFontFamily, getFontWeight } from '../../../mixins/typography';

const sharedAttributes = {
  face: 'sans',
  bold: 'true',
};

const SectionHeaderLarge: PatchworkComponent<SectionHeaderProps> = styled.h2.attrs(
  sharedAttributes,
)`
  color: ${getPaletteColor('greyscale-dark')};
  font-size: ${getHeaderFontSize};
  font-family: ${getFontFamily};
  font-weight: ${getFontWeight};
  line-height: 1.2;
  margin-top: 0px;
  margin-bottom: 20px;
`;

SectionHeaderLarge.displayName = 'SectionHeaderLarge';

const SectionHeaderSmall: PatchworkComponent<SectionHeaderProps> = styled.h3.attrs(
  sharedAttributes,
)`
  color: ${getPaletteColor('greyscale-dark')};
  font-size: ${getHeaderFontSize};
  font-family: ${getFontFamily};
  font-weight: ${getFontWeight};
  line-height: 1.2;
  margin-top: 0px;
  margin-bottom: 10px;
`;

SectionHeaderSmall.displayName = 'SectionHeaderSmall';

export const SectionHeader = ({
  children,
  size = 'lg',
}: SectionHeaderProps) => {
  switch (size) {
    case 'lg':
      return <SectionHeaderLarge size={size}>{children}</SectionHeaderLarge>;
    case 'sm':
      return <SectionHeaderSmall size={size}>{children}</SectionHeaderSmall>;
    default:
      return <SectionHeaderLarge size={size}>{children}</SectionHeaderLarge>;
  }
};
