"use client";
import { motion } from "framer-motion";

export function InfiniteMarquee() {
  return (
    <div className="w-full max-w-md overflow-hidden bg-[#0a0a0a] rounded-lg border border-border py-4 flex items-center relative">
      <div className="absolute inset-y-0 left-0 w-12 bg-gradient-to-r from-[#0a0a0a] to-transparent z-10 pointer-events-none" />
      <div className="absolute inset-y-0 right-0 w-12 bg-gradient-to-l from-[#0a0a0a] to-transparent z-10 pointer-events-none" />
      <motion.div
        animate={{ x: [0, -600] }}
        transition={{ repeat: Infinity, ease: "linear", duration: 10 }}
        className="flex gap-4 whitespace-nowrap px-4"
      >
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="px-6 py-2 rounded-full bg-[#151515] text-sm text-foreground border border-border cursor-default hover:bg-[#222222] transition-colors">
            Interactive Component {i + 1}
          </div>
        ))}
      </motion.div>
    </div>
  );
}