export function NewsLetterSwiper()

in src/components/newsletter-swiper/index.tsx [10:50]
30 lines of code
3 McCabe index (conditional complexity)

export function NewsLetterSwiper() {
    const { isPhone } = usePhone();

    const [swiperRef, setSwiperRef] = useState<SwiperClass>();
    const [progressCount, setProgressCount] = useState<number>(0);
    const [stop, setStop] = useState<boolean>(false);

    // Using ref to track progress internally
    const progressRef = useRef(progressCount);

    const handlePrevious = useCallback(() => {
        swiperRef?.slidePrev();
    }, [swiperRef]);

    const handleNext = useCallback(() => {
        swiperRef?.slideNext();
    }, [swiperRef]);

    useAnimationFrame(deltaTime => {
        if (!stop) {
            const newProgress = progressRef.current + deltaTime * 0.02;
            if (newProgress >= 100) {
                setProgressCount(0); // Reset state after reaching 100%
                progressRef.current = 0;
                setTimeout(handleNext, 0); // Delay to avoid direct state change within render
            } else {
                progressRef.current = newProgress;
                setProgressCount(newProgress); // Update UI state
            }
        }
    }, stop);

    const pagination = {
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '"></span>';
        },
    };

    return (
        <div className="container pt-14" onMouseMove={() => setStop(true)} onMouseLeave={() => setStop(false)}>