import React from 'react';
import PropTypes from 'prop-types';

const PageTitle = ({ heading, subheading, left, color, pb }) => {
  return (
    <div
      className={
        'flex flex-col gap-8p' +
        (left ? ' text-left items-start' : ' text-center items-center') +
        (color ? ' title-colored' : ' ') +
        (pb ? ' pb-2' : ' ')
      }
    >
      <h2 className={'subheading' + (left ? ' text-left' : ' text-center')}>
        {subheading}
      </h2>
      <h3 className={'heading' + (left ? ' text-left' : ' text-center')}>{heading}</h3>
    </div>
  );
};

PageTitle.propTypes = {
  heading: PropTypes.string,
  subheading: PropTypes.string,
  left: PropTypes.bool,
  color: PropTypes.bool,
};

export default PageTitle;
