import React from 'react';
import { IDiv } from '../../types/interface';
import JDIcon from '../icons/Icons';

interface Iprops extends IDiv {
  title?: string;
  desc?: string | JSX.Element;
  displayIcon?: boolean;
}

const PageHeader: React.FC<Iprops> = ({
  title,
  desc,
  displayIcon = true,
  ...props
}) => {
  return (
    <div className="PageHeader" {...props}>
      <div className="PageHeader__inner container container--full">
        {displayIcon && (
          <span className="PageHeader__quotoes">
            <JDIcon size="largest" icon="quoteLeft" />
          </span>
        )}
        <div>
          <h3 className="PageHeader__title">
            <b>{title}</b>
          </h3>
          <span className="PageHeader__desc">{desc}</span>
        </div>
        {displayIcon && (
          <span className="PageHeader__quotoes">
            <JDIcon size="largest" icon="quoteRight" />
          </span>
        )}
      </div>
    </div>
  );
};

export default PageHeader;
