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

/**
 * 侧边信息面板组件
 * @param {Object} props
 * @param {Array} props.sections - 信息区块配置数组
 * @param {string} props.className - 自定义类名
 */
function SideInfoPanel({ sections = [], className = '' }) {
  const [collapsedSections, setCollapsedSections] = useState(() => {
    const initial = {}
    sections.forEach((section) => {
      if (section.defaultCollapsed) {
        initial[section.key] = true
      }
    })
    return initial
  })

  const toggleSection = (key) => {
    setCollapsedSections((prev) => ({
      ...prev,
      [key]: !prev[key],
    }))
  }

  return (
    <div className={`side-info-panel ${className}`}>
      {sections.map((section) => {
        const isCollapsed = collapsedSections[section.key]

        return (
          <div key={section.key} className="side-info-section">
            {/* 区块头部 */}
            <div className="side-info-section-header" onClick={() => toggleSection(section.key)}>
              <div className="side-info-section-title">
                {section.icon && <span className="side-info-section-icon">{section.icon}</span>}
                <span>{section.title}</span>
              </div>
              <button className="side-info-section-toggle" type="button">
                {isCollapsed ? <DownOutlined /> : <UpOutlined />}
              </button>
            </div>

            {/* 区块内容 */}
            {!isCollapsed && (
              <div className="side-info-section-content">{section.content}</div>
            )}
          </div>
        )
      })}
    </div>
  )
}

export default SideInfoPanel