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

const ApexChart = () => {
    const [state] = React.useState({
        series: [75], // Replace this with dynamic value if needed
        options: {
            chart: {
                height: 200, // Smaller height
                type: "radialBar",
                toolbar: {
                    show: false, // Hide toolbar
                },
            },
            plotOptions: {
                radialBar: {
                    startAngle: -135,
                    endAngle: 225,
                    hollow: {
                        margin: 0,
                        size: "60%", // Smaller inner circle
                        background: "#fff",
                        dropShadow: {
                            enabled: true,
                            top: 2,
                            left: 0,
                            blur: 3,
                            opacity: 0.45,
                        },
                    },
                    track: {
                        background: "#f5f5f5",
                        strokeWidth: "67%",
                        dropShadow: {
                            enabled: false,
                        },
                    },
                    dataLabels: {
                        show: true,
                        name: {
                            offsetY: -10,
                            color: "#888",
                            fontSize: "14px",
                        },
                        value: {
                            formatter: (val) => parseInt(val),
                            color: "#111",
                            fontSize: "24px", // Smaller number
                            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",
            },
            labels: ["Percent"],
        },
    });

    return (
        <div id="chart">
            <ReactApexChart
                options={state.options}
                series={state.series}
                type="radialBar"
                height={200} // Also apply to component
            />
        </div>
    );
};

export default ApexChart;
