import React from "react";
import ReactApexChart from "react-apexcharts";

const ProgressDonutChart = ({ completed = 0, planned = 1 }) => {
  const percentage = planned > 0 ? Math.round((completed / planned) * 100) : 0;

  const options = {
    chart: {
      height: 10,
      type: "radialBar",
      toolbar: { show: false },
    },
    plotOptions: {
      radialBar: {
        startAngle: 0,
        endAngle: 360,
        hollow: {
          margin: 0,
          size: "10%",
          background: "#fff",
          dropShadow: {
            enabled: true,
            top: 0,
            left: 0,
            blur: 3,
            opacity: 0.45,
          },
        },
        track: {
          background: "#f5f5f5",
          strokeWidth: "10%",
          dropShadow: { enabled: false },
        },
        dataLabels: {
          show: true,
          name: {
            offsetY: -10,
            color: "#888",
            fontSize: "14px",
          },
          value: {
            formatter: (val) => `${val}%`,
            color: "#111",
            fontSize: "11px",
            show: true,
          },
        },
      },
    },
    fill: {
      type: "gradient",
      gradient: {
        shade: "dark",
        type: "horizontal",
        shadeIntensity: 0.5,
        gradientToColors: ["#ABE5A1"],
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 100],
      },
    },
    stroke: {
      lineCap: "round",
    },
  };

  return (
    <div id="chart">
      <ReactApexChart
        options={options}
        series={[percentage]}
        type="radialBar"
        height={100}
      />
    </div>
  );
};

export default ProgressDonutChart;
