"use client"

import { motion } from "framer-motion"
import type { ReactNode } from "react"

interface InfiniteMarqueeProps {
  children: ReactNode
  speed?: number
  direction?: "left" | "right"
  className?: string
}

export default function InfiniteMarquee({
  children,
  speed = 50,
  direction = "left",
  className = "",
}: InfiniteMarqueeProps) {
  const directionMultiplier = direction === "left" ? -1 : 1

  return (
    <div className={`overflow-hidden whitespace-nowrap ${className}`}>
      <motion.div
        className="inline-block"
        animate={{
          x: directionMultiplier * -1000,
        }}
        transition={{
          duration: speed,
          repeat: Number.POSITIVE_INFINITY,
          ease: "linear",
        }}
      >
        <div className="inline-flex gap-8">{children}</div>
        <div className="inline-flex gap-8 ml-8">{children}</div>
      </motion.div>
    </div>
  )
}