"use client";
import React, { useState } from "react";
import ReactApexChart from "react-apexcharts";

interface DonutPieChartProps {}

interface DonutPieChartState {
  series: number[];
  options: {
    chart: {
      type: string;
    };
    labels: string[];
    responsive: {
      breakpoint: number;
      options: {
        chart: {
          width: number;
        };
        legend: {
          position: string;
        };
      };
    }[];
    legend: {
      show: boolean;
    };
    dataLabels: {
      enabled: boolean;
    };
    plotOptions: {
      pie: {
        startAngle: number;
        endAngle: number;
        donut: {
          size: string;
        };
      };
    };
  };
}

const DonutPieChart: React.FC<DonutPieChartProps> = (props) => {
  const [state, setState] = useState<DonutPieChartState>({
    series: [44, 55, 13, 43, 22],
    options: {
      chart: {
        type: "donut",
      },
      labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5"],
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 200,
            },
            legend: {
              position: "bottom",
            },
          },
        },
      ],
      legend: {
        show: false,
      },
      dataLabels: {
        enabled: false,
      },
      plotOptions: {
        pie: {
          startAngle: -90,
          endAngle: 90,
          donut: {
            size: "50%", // Set the size of the donut to only half
          },
        },
      },
    },
  });

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={{
            ...state.options,
            chart: {
              ...state.options.chart,
              type: "donut",
            },
          }}
          series={state.series}
          type="donut"
        />
      </div>
    </div>
  );
};

export default DonutPieChart;