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

const { Text, Title } = Typography

// PageHeader is the standard top-of-page block: icon + title +
// optional subtitle on the left, optional extras (buttons, status
// dots, …) on the right. Lifted from the proxy-lb-waf design system
// so every page across EdgeGuard now has the same visual hierarchy.
interface PageHeaderProps {
  icon?: ReactNode
  title: ReactNode
  subtitle?: ReactNode
  extra?: ReactNode
}

export default function PageHeader({ icon, title, subtitle, extra }: PageHeaderProps) {
  return (
    <div className="page-header">
      <div className="page-header-main">
        <Title level={4} className="page-header-title">
          {icon && <span className="page-header-icon">{icon}</span>}
          {title}
        </Title>
        {subtitle && <Text type="secondary" className="page-header-subtitle">{subtitle}</Text>}
      </div>
      {extra && <Space wrap>{extra}</Space>}
    </div>
  )
}