'use client';

import React, {FC} from 'react';
import {GaugeChartStyle as S} from './gauge-chart.style';
import {IGaugeChart} from './gauge-chart.type';

/**
 * @author Shayan Montazeri
 * @version 0.0.1
 * @description A customizable circle Gauge chart component
 */
export const GaugeChartComponent: FC<IGaugeChart> = ({
    className,
    isRTL,
    ...rest
}) => {
    return (
        <S.Container className={className}>
            <S.StyledGauge
                cornerRadius='50%'
                text={({value}) => `${value?.toFixed(1)}%`}
                startAngle={0}
                endAngle={isRTL ? -360 : 360}
                {...rest}
            />
        </S.Container>
    );
};