import { Space, Typography } from 'antd'
import type { ReactNode } from 'react'

type PageHeaderProps = {
  title: string
  description?: string
  extra?: ReactNode
}

export default function PageHeader({ title, description, extra }: PageHeaderProps) {
  return (
    <header className="page-header">
      <div>
        <Typography.Title level={2} className="page-title">
          {title}
        </Typography.Title>
        {description ? <p className="page-description">{description}</p> : null}
      </div>
      {extra ? <Space wrap>{extra}</Space> : null}
    </header>
  )
}
