import { Button } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import type { ReactNode } from 'react'
import { colors } from '../tokens'

interface SectionHeaderProps {
  title: ReactNode
  /** 提供时显示"返回"按钮（子视图/抽屉 tab 环境可省）。 */
  onBack?: () => void
  /** 返回按钮文案（默认"返回"）。 */
  backLabel?: string
  /** 右侧操作区（筛选/刷新/导出等）。 */
  actions?: ReactNode
}

/**
 * 内容区子视图的标准横排头部：可选返回按钮 + 标题 + 右侧操作区。
 * 供智能评估等 Drawer/Tabs 内容组件复用，消除各自手写 header 的重复。
 */
export default function SectionHeader({ title, onBack, backLabel = '返回', actions }: SectionHeaderProps) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
      {onBack && <Button icon={<ArrowLeftOutlined />} onClick={onBack}>{backLabel}</Button>}
      <span style={{ fontSize: 16, fontWeight: 600, color: colors.text }}>{title}</span>
      <div style={{ flex: 1 }} />
      {actions}
    </div>
  )
}