import Image from "next/image";
import Shrimp from "./shrimp.png";

export function ShrimpRain({ randomValues }: { randomValues: number[] }) {
    const maxWidthToShrimp = randomValues.length;

    const shrimpImagesArray = Array.from(Array(maxWidthToShrimp).keys());
    const shrimpImagesArrayElements = shrimpImagesArray.map((index) => {
        const left = "left-[" + (index + 1) + "%]";
        const bottom = "bottom-[" + randomValues[index] + "%]";
        return (
            <Image
                key={index}
                className="w-[15%] h-auto absolute animate-shrimply-rain"
                src={Shrimp}
                alt="3D modeled shrimp"
                width={774}
                height={605}
                style={{
                    left: +index + 1 + "%",
                    bottom: randomValues[index] + "%",
                }}
            />
        );
    });

    return (
        <div className="fixed w-full h-full overflow-hidden">
            {shrimpImagesArrayElements}
        </div>
    );
}