import { Chart } from "@cloudflare/kumo";
import * as echarts from "echarts/core";
import { EChartsOption } from "echarts";
import { useMemo } from "react";

export function PieChartDemo() {
  const isDarkMode = useIsDarkMode();

  const options = useMemo(
    () =>
      ({
        animation: true,
        animationDuration: 2000,
        toolbox: {
          show: false,
        },
        series: [
          {
            type: "pie",
            data: [
              { value: 101, name: "Series A" },
              { value: 202, name: "Series B" },
              { value: 303, name: "Series C" },
              { value: 404, name: "Series D" },
              { value: 505, name: "Series E" },
            ],
          },
        ],
      }) as EChartsOption,
    [],
  );

  return (
    <Chart
      echarts={echarts}
      options={options}
      height={400}
      isDarkMode={isDarkMode}
    />
  );
}