import React from 'react';
import styled from 'styled-components';

export const PageTitle = ({ title }) => {
  return (
    <React.Fragment>
      <SectionTitle className="section-title">{title}</SectionTitle>
    </React.Fragment>
  );
};

export const BoldTitle = ({ title, className }) => {
  return (
    <React.Fragment>
      <BoldSectionTitle className={className}>{title}</BoldSectionTitle>
    </React.Fragment>
  );
};

const SectionTitle = styled.h2`
  font-family: var(--ff-sbold);
  font-weight: 600;
  color: var(--co-head);
  font-size: 2rem;
`;
const BoldSectionTitle = styled.h2`
  font-family: var(--ff-heading);
  font-weight: 700;
  color: var(--co-head);
  font-size: 2.4rem;
`;
