'use client'

import { Menu } from 'lucide-react'

interface H5HeaderProps {
  title: string
  onMenuClick: () => void
  showBetaBadge?: boolean
}

/** H5 顶栏：菜单按钮 + 标题。纯展示。 */
export function H5Header({
  title,
  onMenuClick,
  showBetaBadge = false,
}: H5HeaderProps): React.JSX.Element {
  return (
    <header className="h5-header">
      <button className="h5-icon-btn" onClick={onMenuClick} aria-label="菜单">
        <Menu size={20} />
      </button>
      <div className="h5-header-title">
        {title}
        {showBetaBadge ? <span className="h5-beta-badge">Beta</span> : null}
      </div>
    </header>
  )
}