import React from "react";
import ReactECharts from "echarts-for-react";
import { getChartColor } from "@/utils/chartColors";

interface LineChartProps {
  title?: string;
  xData: string[];
  yData: any[];
  height?: number | string;
}

const LineChart: React.FC<LineChartProps> = ({
  title = "",
  xData,
  yData,
  height = 200,
}) => {
  const option = {
    title: {
      text: title,
      left: "center",
      textStyle: { fontSize: 16 },
    },
    tooltip: { trigger: "axis" },
    xAxis: {
      type: "category",
      data: xData,
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      boundaryGap: ["10%", "10%"], // 上下留白
      min: (value: any) => value.min - 10, // 下方多留一点空间
      max: (value: any) => value.max + 10, // 上方多留一点空间
      minInterval: 1,
      axisLabel: { margin: 12 },
    },
    series: [
      ...yData.map((item, index) => {
        const color = getChartColor(index);
        return {
          data: item,
          type: "line",
          smooth: true,
          symbol: "circle",
          lineStyle: { color },
          itemStyle: { color },
        };
      }),
    ],
    grid: { left: 40, right: 24, top: 40, bottom: 32 },
  };

  return <ReactECharts option={option} style={{ height, width: "100%" }} />;
};

export default LineChart;
