import React, { useState } from 'react';
import './ChartPanel.css';

export default function ChartPanel({ title = '图表', collapsible = true, collapsed = false, onRefresh, onExport, children }) {
  const [isCollapsed, setIsCollapsed] = useState(collapsed);
  return (
    <div className={'aa-chartpanel' + (isCollapsed ? ' is-collapsed' : '')}>
      <div className="aa-chartpanel-head">
        <span className="aa-chartpanel-title">{title}</span>
        <div className="aa-chartpanel-tools">
          <button className="aa-chartpanel-tool" onClick={onRefresh}>刷新</button>
          <button className="aa-chartpanel-tool" onClick={onExport}>导出</button>
          {collapsible ? (
            <button className="aa-chartpanel-tool aa-chartpanel-caret" onClick={() => setIsCollapsed(c => !c)}>▾</button>
          ) : null}
        </div>
      </div>
      <div className="aa-chartpanel-body">{children || '图表区域'}</div>
    </div>
  );
}