import { memo, useMemo } from 'react';
import GaugeChart from 'react-gauge-chart';

const yellow="#FDEE00";
const green="#3FFF00"
const red="#FF0800"
const grey="#C0C0C0"
type GaugeChartProps = {
  percent: number;
  isYellowBeautiful?:boolean
};

const chartStyle = {
  height: 195,
}


const CustomGaugeChart: React.FC<GaugeChartProps> = ({ percent,isYellowBeautiful}) => {

  const newPercentage = useMemo(() => {
    const safePercent = Math?.max(0, Math?.min(100, Number(percent))); 
    return safePercent / 100;
  }, [percent]);
  const getColor = () => {
    if (newPercentage < 0.25) {
      return green; 
    } else if (newPercentage < 0.5) {
      return yellow; 
    } else {
      return red;
    }
  };
  
  return (
    <GaugeChart
      id="gauge-chart3"
      nrOfLevels={10}
      percent={newPercentage}
      formatTextValue={() => ``}
      colors={[isYellowBeautiful? yellow:getColor(), grey]} 
      arcWidth={0.3}
      cornerRadius={0}
      arcsLength={[newPercentage, 1 - newPercentage]}
      arcPadding={0.02}
      style={chartStyle}    
       />
  );
};

export default memo(CustomGaugeChart);