import { Box, Text } from "@chakra-ui/react";
import React, { useEffect, useState } from "react";

const CircularProgress: React.FC<{ value: number; max: number }> = ({ value, max }) => {
  const totalDots = 60; // Total number of dots in the circle
  const filledDots = Math.round((value / max) * totalDots); // Number of filled dots

  return (
    <Box position={'relative'}>
      <svg width="200" height="100%" viewBox="0 0 100 100">
        {Array.from({ length: totalDots }).map((_, i) => {
          const angle = (i / totalDots) * 360;
          const x = 50 + 40 * Math.cos((angle * Math.PI) / 180);
          const y = 50 + 40 * Math.sin((angle * Math.PI) / 180);

          return (
            <circle
              key={i}
              cx={x}
              cy={y}
              r="1"
              fill={i < filledDots ? "#2563eb" : ""} // Blue for filled, Gray for empty
              opacity={i < filledDots ? 1 : 0.1}
            />
          );
        })}
      </svg>
      <Text position={'absolute'} left={'42%'} top={'44%'} fontSize={'md'} fontWeight={500}>{value}</Text>
    </Box>
  );
};

// Usage Example with Animation
const CircularApp: React.FC = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => (prev < 350 ? prev + 20 : 350));
    }, 300);
    return () => clearInterval(interval);
  }, []);

  return (
    <Box display={'flex'} justifyContent={'center'} alignItems={'center'} h={'90%'}>
      <CircularProgress value={progress} max={450} />
    </Box>
  );
};

export default CircularApp;
