import type { ComponentType, ReactNode } from "react"

import { cn } from "@/shared/lib/utils"

/**
 * 页面头部：统一的标题 + 描述 + 操作区域布局。
 *
 * 覆盖以下重复模式：
 * - AdminDashboardView 内联头部
 * - Profile 页面内联头部
 * - SettingsView 内联头部
 * - Security 页面内联头部（带图标）
 *
 * 结构：左侧标题 + 描述，右侧操作区域（响应式：移动端纵向，桌面端横向）。
 */
interface PageHeaderProps {
  /** 页面标题 */
  title: string
  /** 标题下方描述文本 */
  description?: string
  /** 标题左侧图标组件（lucide-react 图标等） */
  icon?: ComponentType<{ className?: string }>
  /** 右侧操作区域（按钮、徽章等） */
  actions?: ReactNode
  /** 额外类名 */
  className?: string
}

export function PageHeader({ title, description, icon: Icon, actions, className }: PageHeaderProps) {
  return (
    <div className={cn("flex flex-col justify-between gap-4 md:flex-row md:items-center", className)}>
      <div className="space-y-1">
        <div className="flex items-center gap-2">
          {Icon ? <Icon className="h-7 w-7 text-muted-foreground" /> : null}
          <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
        </div>
        {description ? (
          <div className="text-sm text-muted-foreground">{description}</div>
        ) : null}
      </div>
      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
    </div>
  )
}