import Chart from "@/core/components/Chart";
import {calculateGradientColor} from "@/core/utils/gradientColorHandler";
import {useTranslations} from "next-intl";

const RadialBarStrokedChart = ({data, label}) => {
    const t = useTranslations();
    const specialOption = {
        title: {
            text: undefined,
        },
        plotOptions: {
            radialBar: {
                startAngle: -110,
                endAngle: 110,
                track: {
                    background: "#e7e7e7",
                    strokeWidth: '80%',
                },
                dataLabels: {
                    name: {
                        fontSize: '20px',
                        offsetY: 110,
                        color: "#8c8c8c"
                    },
                    value: {
                        offsetY: 50,
                        fontSize: '50px',
                        fontWeight: 500,
                        color: "#8c8c8c",
                        formatter: function (val) {
                            return val + "%";
                        }
                    }
                }
            }
        },
        stroke: {
            dashArray: 4
        },
        fill: {
            colors: calculateGradientColor(data)
        },
        labels: [label],
    };
    const series = [data]
    return (
        <Chart chartId="LoanProgressBar" type="radialBar" specialOption={specialOption} series={series}/>
    )
};

export default RadialBarStrokedChart;