import { memo } from 'react'
import { cn } from '@/lib/utils'

interface PageHeaderProps {
  title?: string
  description?: string
  action?: React.ReactNode
  className?: string
}

/**
 * 页面头部组件
 * 标题+描述+操作按钮的统一布局
 * 替换各页面中重复的 header 结构
 */
export const PageHeader = memo(function PageHeader({
  title,
  description,
  action,
  className,
}: PageHeaderProps) {
  return (
    <div className={cn('flex flex-wrap items-center justify-between gap-3', className)}>
      <div className="min-w-0">
        {title && <h2 className="text-lg font-semibold text-foreground">{title}</h2>}
        {description && (
          <p className={cn('text-sm text-muted-foreground', title && 'mt-0.5')}>{description}</p>
        )}
      </div>
      {action && <div className="flex-shrink-0">{action}</div>}
    </div>
  )
})

export default PageHeader