/**
 * PageHeader - 页面头部组件
 * 
 * 包含面包屑导航、页面标题、描述、操作按钮
 */

import { Breadcrumb, Typography, Space, type BreadcrumbProps } from 'antd'
import type { ReactNode } from 'react'
import styles from './PageHeader.module.css'

const { Title, Paragraph } = Typography

interface PageHeaderProps {
  /** 面包屑项 */
  breadcrumb?: BreadcrumbProps['items']
  /** 页面标题 */
  title: string
  /** 页面描述 */
  description?: string
  /** 操作按钮区 */
  actions?: ReactNode
  /** 底部额外内容 */
  footer?: ReactNode
}

export function PageHeader({
  breadcrumb,
  title,
  description,
  actions,
  footer,
}: PageHeaderProps) {
  return (
    <div className={styles.container}>
      {breadcrumb && breadcrumb.length > 0 && (
        <Breadcrumb items={breadcrumb} className={styles.breadcrumb} />
      )}
      
      <div className={styles.header}>
        <div className={styles.titleArea}>
          <Title level={4} className={styles.title}>
            {title}
          </Title>
          {description && (
            <Paragraph type="secondary" className={styles.description}>
              {description}
            </Paragraph>
          )}
        </div>
        
        {actions && (
          <Space className={styles.actions}>
            {actions}
          </Space>
        )}
      </div>
      
      {footer && (
        <div className={styles.footer}>
          {footer}
        </div>
      )}
    </div>
  )
}
