import React, { useEffect, useRef, useState } from 'react';
import anime from 'animejs';

const startNumber = 1000; 
const endNumber = 1239; 
const imageCount = endNumber - startNumber + 1; 
const images = [];

for (let i = startNumber; i <= endNumber; i++) {
    const formattedNumber = String(i).padStart(5, '0');
    images.push(import(`../../assets/characters/F_porche_akimbo_AME/Porsche${formattedNumber}.png`));
}

const CharacterAnimation = () => {
    const totalFrames = imageCount; 
    const frameDuration = 20;
    const [currentFrame, setCurrentFrame] = useState(0);
    const [loadedImages, setLoadedImages] = useState([]); 
    const characterRef = useRef(null);

    useEffect(() => {
        Promise.all(images).then((resolvedImages) => {
            setLoadedImages(resolvedImages.map(image => image.default)); 
        });
    }, []);

    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentFrame((prevFrame) => (prevFrame + 1) % totalFrames);
        }, frameDuration);

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

    return (
        <img
            ref={characterRef}
            src={loadedImages[currentFrame]}
            alt="Character Animation"
            style={{ width: '200px', height: 'auto' }}
        />
    );
};

export default CharacterAnimation;