import Image from "next/image";
import danceShrimp from "../assets/dance-shrimp-dance.gif";

export default function DancingShrimps() {
    const shrimpArray = Array.from(Array(20).keys());
    const shrimpArrayElements = shrimpArray.map((index) => (
        <Image
            key={index}
            className="w-[150px] h-auto"
            src={danceShrimp}
            alt="dancing 3D modeled shrimp"
            width={910}
            height={530}
        />
    ));

    return (
        <div className="flex flex-wrap justify-between py-5 bg-apricot-shrimp">
            {shrimpArrayElements}
        </div>
    );
}

//todo try out one line of shrimp only that change size