"use client";

import { cn } from "@/lib/utils";
import type { ReactNode } from "react";

/**
 * CSS driven infinite ticker. No JS in the animation loop, so it costs nothing
 * on scroll. The content is duplicated once and translated by exactly half,
 * which is what makes the loop seamless.
 */
export function Marquee({
  children,
  speed = 42,
  reverse = false,
  pauseOnHover = true,
  className,
}: {
  children: ReactNode;
  speed?: number;
  reverse?: boolean;
  pauseOnHover?: boolean;
  className?: string;
}) {
  return (
    <div
      className={cn("group relative overflow-hidden", className)}
      // Fade the ends so items enter and leave rather than being cut off.
      style={{
        maskImage:
          "linear-gradient(to right, transparent, black 8%, black 92%, transparent)",
        WebkitMaskImage:
          "linear-gradient(to right, transparent, black 8%, black 92%, transparent)",
      }}
    >
      <div
        className={cn(
          "flex w-max items-center",
          pauseOnHover && "group-hover:[animation-play-state:paused]",
        )}
        // Reduced motion is handled by the media query in globals.css, which
        // collapses the animation to its end state. The content is duplicated,
        // so a parked marquee still shows every item. Doing it in CSS rather
        // than in a prop keeps the server and client markup identical.
        style={{
          animation: `marquee-x ${speed}s linear infinite`,
          animationDirection: reverse ? "reverse" : "normal",
        }}
      >
        {children}
        <span aria-hidden="true" className="flex items-center">
          {children}
        </span>
      </div>
    </div>
  );
}