import React from 'react';
import { cn } from '@/lib/utils';

interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  reverse?: boolean;
  pauseOnHover?: boolean;
  children: React.ReactNode;
}

export function Marquee({
  className,
  reverse = false,
  pauseOnHover = true,
  children,
  ...props
}: MarqueeProps) {
  const animClass = reverse ? 'animate-infinite-rtl' : 'animate-infinite-ltr';

  return (
    <div
      {...props}
      className={cn('relative w-full overflow-hidden select-none py-3', className)}
    >
      <div
        className={cn(
          'flex shrink-0 w-max items-center',
          animClass,
          {
            'hover:[animation-play-state:paused]': pauseOnHover,
          }
        )}
      >
        {/* 4 Identical blocks with pr-4 and internal gap-4 for 100% pixel-perfect seamless looping without stutter */}
        <div className="flex items-center gap-4 pr-4 shrink-0">{children}</div>
        <div className="flex items-center gap-4 pr-4 shrink-0" aria-hidden="true">{children}</div>
        <div className="flex items-center gap-4 pr-4 shrink-0" aria-hidden="true">{children}</div>
        <div className="flex items-center gap-4 pr-4 shrink-0" aria-hidden="true">{children}</div>
      </div>
    </div>
  );
}

export default Marquee;