import { useState, useEffect } from "react";

export default function Timer2(Props: Timer.Timer) {
    const { expiresIn, className } = Props;

    const [minutes, setMinutes] = useState<number>(0);
    const [seconds, setSeconds] = useState<number>(0);

    const formatTime = (time: number) =>
        time < 10 ? `0${time}` : time.toString();

    const [timeLeft, setTimeLeft] = useState<number>(expiresIn);

    useEffect(() => {
        if (timeLeft <= -1) return;

        const interval = setInterval(() => {
            setTimeLeft((prev) => prev - 1);

            setMinutes(Math.floor(timeLeft / 60));
            setSeconds(timeLeft % 60);
        }, 1000);

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

    return (
        <div className="text-white text-center flex justify-center items-center py-5 gap-x-3 md:gap-x-6">
            {["Minutos", "Segundos"].map((label, index) => (
                <div
                    key={`key-timer-2-${label}`}
                    className={`darkContainer p-3 rounded shadow w-20 md:w-32 flex flex-col items-center ${className}`}
                >
                    <span className="text-3xl md:text-6xl text">
                        {formatTime(index === 0 ? minutes : seconds)}
                    </span>
                    <span className="text-xs md:text-lg">{label}</span>
                </div>
            ))}
        </div>
    );
}