cool-timer

"use client";
import { motion } from "framer-motion";
import React, { useState, useEffect } from "react";

const CounterTime: React.FC = () => {
    const [time, setTime] = useState<number>(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setTime((prevTime) => (prevTime < 12 ? prevTime + 1 : 0));
        }, 1000);

        return () => clearInterval(interval);
    }, []);

    const padTime = (time: number): string => String(time).padStart(2, "0");
    const sec = time;
    const progress = (time / 12) * 100;
    const totalCircles = 12;

    // Timer radius for outer circles 
    const radius = 65; // Adjust this value to set how far circles are placed from the center
    const centerX = 64; // Half of w-32 (64px)
    const centerY = 64; // Half of h-32 (64px)

    // Calculate circle positions around the timer using trigonometry
    const circlePositions = Array.from({ length: totalCircles }, (_, index) => {
        const angle = (index / totalCircles) * 2 * Math.PI; // Calculate angle for each circle
        const x = centerX + radius * Math.cos(angle) - 8; // Adjust x for correct positioning
        const y = centerY + radius * Math.sin(angle) - 8; // Adjust y for correct positioning
        return { x, y };
    });

    return (
        <div className="relative">
            {circlePositions.map((pos, index) => (
                <motion.div
                    key={index}
                    className="w-4 h-4 rounded-full absolute z-10"
                    style={{
                        left: `${pos.x}px`,
                        top: `${pos.y}px`,
                    }}
                    animate={{
                        backgroundColor: index < time ? "#9b7a5c" : "#524131",
                        scale: index < time ? 1 : 0.1,
                    }}
                    transition={{
                        duration: 0.5,
                        type: "spring",
                        bounce: 0.5,
                    }}
                />
            ))}
            <div className="relative w-32 h-32 flex flex-col items-center justify-center bg-black text-white rounded-full overflow-hidden shadow-lg">
                <div className="absolute z-20 top-1 font-bold font-serif text-[#7e5f41] text-xl">
                    SEC
                </div>
                <div className="relative z-20 text-[70px] font-serif font-bold mb-4 text-[#9b7a5c] mix-blend-lighten">
                    {padTime(sec)}
                </div>

                {/* Progress bar section with darker upper half */}
                <motion.div
                    className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-[#614F36]"
                    style={{ height: `${progress}%`, opacity: 0.8 }}
                    initial={{ height: "0%" }}
                    animate={{ height: `${progress}%` }}
                    transition={{
                        duration: 1,
                        type: "spring",
                    }}
                />
            </div>
        </div>
    );
};

export default CounterTime;