"use client";

import ReactECharts from "echarts-for-react";
import { insightTrend } from "@/lib/mock-data";
import { baseGrid, chartTheme } from "@/lib/echarts-theme";

export function InsightChart() {
  const option = {
    textStyle: { color: chartTheme.text },
    tooltip: { trigger: "axis" },
    grid: baseGrid(),
    xAxis: { type: "category", data: insightTrend.map((i) => i.date), axisLabel: { color: chartTheme.axis } },
    yAxis: { type: "value", axisLabel: { color: chartTheme.axis }, splitLine: { lineStyle: { color: chartTheme.split } } },
    series: [
      {
        data: insightTrend.map((i) => i.downloads),
        type: "line",
        smooth: true,
        lineStyle: { color: chartTheme.line, width: 3 },
        areaStyle: { color: "rgba(34,211,238,.2)" },
      },
    ],
  };
  return <ReactECharts option={option} style={{ height: 320 }} />;
}