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

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

export const PageTitle = ({
  children,
  className,
  spacing = 'pv5',
  grow,
  shrink,
  basis,
  headerLevel = 1,
  'data-qa': dataQa,
  'data-cy': dataCy,
  id,
  ...props
}: PageTitleProps) => {
  return (
    <StyledSemanticHeader
      {...{ spacing, grow, shrink, basis, className, id, headerLevel }}
      data-cy={dataCy}
      data-qa={dataQa}
      fontSize="f5"
      bold
      colorName="greyscale-black"
      {...props}
    >
      {children}
    </StyledSemanticHeader>
  );
};

PageTitle.displayName = 'PageTitle';
