"use client";

import { cn } from "@/lib/utils";

interface MarqueeProps {
  children: React.ReactNode;
  className?: string;
  speed?: "slow" | "normal" | "fast";
  pauseOnHover?: boolean;
}

export default function Marquee({
  children,
  className,
  speed = "normal",
  pauseOnHover = false,
}: MarqueeProps) {
  const speedClass = {
    slow: "animate-marquee-slow",
    normal: "animate-marquee",
    fast: "animate-marquee-fast",
  };

  return (
    <div
      className={cn(
        "flex overflow-hidden",
        pauseOnHover && "hover:[animation-play-state:paused]",
        className
      )}
    >
      <div
        className={cn(
          "flex shrink-0 items-center whitespace-nowrap will-change-transform",
          speedClass[speed]
        )}
      >
        {children}
      </div>
      <div
        className={cn(
          "flex shrink-0 items-center whitespace-nowrap will-change-transform",
          speedClass[speed]
        )}
        aria-hidden="true"
      >
        {children}
      </div>
    </div>
  );
}