import { ArrowLeftOutlined } from '@ant-design/icons'
import './PageHeader.css'

function PageHeader({
  title,
  description,
  icon,
  showBack = false,
  onBack,
  extra
}) {
  return (
    <div className="page-header-standard">
      <div className="page-header-main">
        {showBack && (
          <button className="back-button" onClick={onBack}>
            <ArrowLeftOutlined />
          </button>
        )}
        <div className="page-header-content">
          {icon && <div className="page-header-icon">{icon}</div>}
          <div className="page-header-text">
            <h1 className="page-header-title">{title}</h1>
            {description && (
              <p className="page-header-description">{description}</p>
            )}
          </div>
        </div>
      </div>
      {extra && <div className="page-header-extra">{extra}</div>}
    </div>
  )
}

export default PageHeader