import type { CSSProperties, ReactNode } from 'react'
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(inputs))
}

interface MarqueeProps {
  children: ReactNode
  reverse?: boolean
  pauseOnHover?: boolean
  className?: string
  style?: CSSProperties
}

/**
 * Horizontal infinite marquee. Children duplicated 2x for seamless loop.
 * Speed via CSS var --duration. Gap via CSS var --gap (default 1.5rem).
 */
export function Marquee({
  children,
  reverse = false,
  pauseOnHover = false,
  className,
  style,
}: MarqueeProps) {
  return (
    <div
      className={cn(
        'group flex overflow-hidden',
        '[--gap:1.5rem] [gap:var(--gap)]',
        className,
      )}
      style={{ direction: 'ltr', ...style }}
    >
      {[0, 1].map((i) => (
        <div
          key={i}
          aria-hidden={i === 1 ? 'true' : undefined}
          className={cn(
            'flex shrink-0 [gap:var(--gap)]',
            reverse ? 'animate-marquee-reverse' : 'animate-marquee',
            pauseOnHover && 'group-hover:[animation-play-state:paused]',
          )}
        >
          {children}
        </div>
      ))}
    </div>
  )
}
