import React from 'react';
import cn from 'classnames';

interface Props {
  title: React.ReactNode;
  className?: string;
  actionButton?: React.ReactNode;
  subTitle?: string;
  subTitleClass?: string;
  onDoubleClick?: () => void;
  onClick?: () => void;
}
function PageTitle({
  title,
  actionButton = null,
  subTitle = '',
  className = '',
  subTitleClass,
  onDoubleClick,
  onClick,
}: Props) {
  return (
    <div>
      <div className="flex items-center">
        <h1
          className={cn('text-2xl capitalize-first mt-.5')}
          onDoubleClick={onDoubleClick}
          onClick={onClick}
        >
          {title}
        </h1>
        {actionButton && <div className="ml-2">{actionButton}</div>}
      </div>
      {subTitle && (
        <h2 className={cn('my-4 font-normal color-gray-dark', subTitleClass)}>
          {subTitle}
        </h2>
      )}
    </div>
  );
}

export default PageTitle;
