"use client"
import ReactECharts from "echarts-for-react"
import type {FC} from "react"

const RealtimeLine: FC<{ title?: string; xs: string[]; ys: number[] }> = ({ title = "实时趋势", xs = [], ys = [] }) => {
  const option = {
    title: { text: title, left: "center", textStyle: { fontSize: 12, fontWeight: 500 } },
    tooltip: { trigger: "axis" },
    grid: { left: 40, right: 16, top: 32, bottom: 32 },
    xAxis: { type: "category", boundaryGap: false, data: xs },
    yAxis: { type: "value", name: "" },
    series: [
      {
        name: "value",
        type: "line",
        smooth: true,
        symbol: "none",
        areaStyle: {
          color: "rgba(34,197,94,0.15)",
        },
        lineStyle: { color: "#22c55e", width: 2 },
        data: ys,
      },
    ],
  }
  return <ReactECharts option={option as any} style={{ height: 300, width: "100%" }} notMerge />
}

export default RealtimeLine