"use client";

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

export function InsightBarChart() {
  const option = {
    textStyle: { color: chartTheme.text },
    tooltip: { trigger: "axis" },
    grid: baseGrid(),
    xAxis: {
      type: "category",
      axisLabel: { color: chartTheme.axis },
      data: ["AI 工具", "媒体工具", "设计工具", "开发工具", "网络工具"],
    },
    yAxis: {
      type: "value",
      axisLabel: { color: chartTheme.axis },
      splitLine: { lineStyle: { color: chartTheme.split } },
    },
    series: [
      {
        type: "bar",
        data: [34, 24, 18, 14, 10],
        itemStyle: { borderRadius: [8, 8, 0, 0], color: chartTheme.bar },
      },
    ],
  };
  return <ReactECharts option={option} style={{ height: 280 }} />;
}

export function InsightPieChart() {
  const option = {
    textStyle: { color: chartTheme.text },
    tooltip: { trigger: "item" },
    legend: { bottom: 0, textStyle: { color: chartTheme.subText } },
    series: [
      {
        type: "pie",
        radius: ["45%", "72%"],
        itemStyle: { borderRadius: 8, borderColor: "#020617", borderWidth: 2 },
        label: { color: chartTheme.text },
        data: [
          { value: 42, name: "自然搜索", itemStyle: { color: chartTheme.pieA } },
          { value: 27, name: "公众号", itemStyle: { color: chartTheme.pieB } },
          { value: 16, name: "社群", itemStyle: { color: chartTheme.pieC } },
          { value: 15, name: "外链", itemStyle: { color: chartTheme.pieD } },
        ],
      },
    ],
  };
  return <ReactECharts option={option} style={{ height: 280 }} />;
}