// components/charts/chart-02.jsx
'use client';
import { useEffect } from 'react';
import ApexCharts from 'apexcharts';

const Chart02 = () => {
  useEffect(() => {
    const chartTwoOptions = {
      series: [75.55],
      colors: ["#465FFF"],
      chart: {
        fontFamily: "Outfit, sans-serif",
        type: "radialBar",
        height: 330,
        sparkline: {
          enabled: true,
        },
        animations: {
          enabled: true,
          easing: 'easeinout',
          speed: 800,
        },
      },
      plotOptions: {
        radialBar: {
          startAngle: -90,
          endAngle: 90,
          hollow: {
            size: "80%",
          },
          track: {
            background: "#E4E7EC",
            strokeWidth: "100%",
            margin: 5,
          },
          dataLabels: {
            name: {
              show: false,
            },
            value: {
              fontSize: "36px",
              fontWeight: "600",
              offsetY: 60,
              color: "#1D2939",
              fontFamily: "Outfit, sans-serif",
              formatter: function (val) {
                return val + "%";
              },
            },
          },
        },
      },
      fill: {
        type: "gradient",
        gradient: {
          shade: "dark",
          shadeIntensity: 0.5,
          gradientToColors: ["#465FFF"],
          inverseColors: false,
          opacityFrom: 1,
          opacityTo: 0.8,
          stops: [0, 100],
        },
      },
      stroke: {
        lineCap: "round",
      },
      labels: ["Progress"],
      responsive: [{
        breakpoint: 768,
        options: {
          chart: {
            height: 280,
          },
          plotOptions: {
            radialBar: {
              dataLabels: {
                value: {
                  fontSize: "28px",
                  offsetY: 50,
                },
              },
            },
          },
        },
      }],
    };

    const chart = new ApexCharts(document.querySelector("#chartTwo"), chartTwoOptions);
    chart.render();

    return () => {
      chart.destroy();
    };
  }, []);

  return <div id="chartTwo" />;
};

export default Chart02;