import { useState } from 'react'
import { UpOutlined, DownOutlined } from '@ant-design/icons'
import './PageTitleBar.css'

function PageTitleBar({
  title,
  badge,
  description,
  actions,
  showToggle = false,
  onToggle,
  defaultExpanded = false,
}) {
  const [expanded, setExpanded] = useState(defaultExpanded)

  const handleToggle = () => {
    const newExpanded = !expanded
    setExpanded(newExpanded)
    if (onToggle) {
      onToggle(newExpanded)
    }
  }

  return (
    <div className="page-title-bar">
      <div className="title-bar-content">
        <div className="title-bar-left">
          <div className="title-row">
            <div className="title-group">
              <h1 className="page-title">{title}</h1>
              {badge && <span className="title-badge">{badge}</span>}
            </div>
            {description && <p className="page-description">{description}</p>}
          </div>
        </div>
        <div className="title-bar-right">
          {actions && <div className="title-actions">{actions}</div>}
          {showToggle && (
            <button
              className="toggle-button"
              onClick={handleToggle}
              title={expanded ? '收起信息面板' : '展开信息面板'}
            >
              {expanded ? <UpOutlined /> : <DownOutlined />}
            </button>
          )}
        </div>
      </div>
    </div>
  )
}

export default PageTitleBar