import { EChart } from "./EChart.jsx";
import { readCssToken } from "@/shared/utils/cssTokens.js";

export function LineChart({ colorToken = "--chart-blue", series }) {
  const color = readCssToken(colorToken);
  return <EChart className="line-chart" option={createLineOption(color, series)} />;
}

function createLineOption(color, series) {
  const tooltipBg = readCssToken("--chart-tooltip-bg");
  const tooltipBorder = readCssToken("--chart-tooltip-border");
  const tooltipText = readCssToken("--chart-tooltip-text");
  const gridColor = readCssToken("--chart-grid");

  return {
    animationDuration: 450,
    grid: { left: 8, right: 8, top: 14, bottom: 8, containLabel: false },
    tooltip: {
      trigger: "axis",
      backgroundColor: tooltipBg,
      borderColor: tooltipBorder,
      textStyle: { color: tooltipText }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: series.map((_, index) => index + 1),
      show: false
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 100,
      show: false,
      splitLine: { show: true, lineStyle: { color: gridColor } }
    },
    series: [
      {
        type: "line",
        data: series,
        smooth: true,
        symbol: "none",
        lineStyle: { width: 2, color },
        areaStyle: { color, opacity: 0.14 }
      }
    ]
  };
}
