// @flow
import React from 'react';
import styled from 'styled-components';
import type { SectionHeaderProps } from './section-header.proptypes';
import { SemanticHeader } from '../../../mixins/semantic-header-level';

const StyledSemanticHeader = styled(SemanticHeader)`
  line-height: 1.2;
`;

export const SectionHeader = ({
  spacing,
  grow,
  shrink,
  basis,
  className,
  size = 'lg',
  headerLevel,
  'data-cy': dataCy,
  'data-qa': dataQa,
  id,
  children,
  ...props
}: SectionHeaderProps) => {
  const defaultSpacing = size === 'lg' ? 'mb2' : 'mb1';
  const defaultHeaderLevel = size === 'lg' ? 3 : 2;

  return (
    <StyledSemanticHeader
      {...{ className, spacing, grow, shrink, basis, id }}
      spacing={spacing ?? defaultSpacing}
      headerLevel={headerLevel ?? defaultHeaderLevel}
      data-cy={dataCy}
      data-qa={dataQa}
      fontSize={size === 'lg' ? 'f2' : 'f1'}
      colorName="greyscale-dark"
      bold
      {...props}
    >
      {children}
    </StyledSemanticHeader>
  );
};

SectionHeader.displayName = 'SectionHeader';
