import { motion } from "motion/react";

export default function Marquee({speed = 10, items, from, to }: {
    speed?: number,
    items: { src: string }[],
    from: number | string, to: number | string
}) {
    return (
        <div className="flex">
            <motion.div
                initial={{ x: `${from}` }}
                animate={{ x: `${to}` }}
                transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
                className="flex shrink-0"
            >
                {items.map((item, index: number) => {
                    return <img width={300} alt={`marqueImg${index}`}
                        className="dark:invert object-scale-down pr-0 sm:pr-16 max-h-16" src={item.src} key={index} />
                })}
            </motion.div>

            <motion.div
                initial={{ x: `${from}` }}
                animate={{ x: `${to}` }}
                transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
                className="flex shrink-0"
            >
                {items.map((item, index: number) => {
                    return <img width={300} alt={`marqueImg${index}`}
                        className="dark:invert object-scale-down pr-0 sm:pr-16 max-h-16" src={item.src} key={index} />;
                })}
            </motion.div>
        </div>
    );
};