import { EChart } from "../charts/EChart.jsx";
import { createRevenueOption } from "../charts/options/createRevenueOption.js";
import { Panel } from "./Panel.jsx";

export function RevenueTrendPanel({ loading = false, revenueSeries }) {
  return (
    <Panel title="充值趋势">
      {loading ? (
        <div className="trend-chart chart-skeleton" aria-busy="true">
          <span className="skeleton-block skeleton-chart-legend" />
          <span className="skeleton-block skeleton-chart-body" />
        </div>
      ) : revenueSeries.length ? (
        <EChart className="trend-chart" option={createRevenueOption(revenueSeries)} />
      ) : (
        <div className="trend-chart panel-empty">暂无趋势数据</div>
      )}
    </Panel>
  );
}