'use client';

import * as React from 'react';
import { motion } from 'motion/react';

import { cn } from '@workspace/ui/lib/utils';

export interface LogosMarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
  logos: { name: string; icon: React.ReactNode }[]; // Array of logo objects with name and icon component
  pauseOnHover?: boolean;
  reverse?: boolean;
  className?: string;
}

export function LogosMarquee({
  logos,
  pauseOnHover = true,
  reverse = false,
  className,
  ...props
}: LogosMarqueeProps) {
  // Duplicate logos for seamless looping
  const duplicatedLogos = [...logos, ...logos];

  return (
    <div
      className={cn("relative flex w-full overflow-hidden py-4", className)}
      style={{
        maskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)',
        WebkitMaskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)',
      }}
      {...props}
    >
      <div
        className={cn(
          "flex w-max gap-8 md:gap-12 pr-8 md:pr-12",
          pauseOnHover ? "group-hover:[animation-play-state:paused]" : "",
          reverse ? "[animation-direction:reverse]" : ""
        )}
        // Adjust duration based on number of logos for consistent speed
        style={{ animation: `marquee ${logos.length * 2}s linear infinite` }}
      >
        {duplicatedLogos.map((logo, index) => (
          <motion.div
            key={`${logo.name}-${index}`}
            className="flex items-center justify-center grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all duration-300"
            whileHover={{ scale: 1.05 }}
            aria-label={`${logo.name} logo`}
          >
            {logo.icon}
          </motion.div>
        ))}
      </div>
      <style jsx>{`
        @keyframes marquee {
          0% { transform: translateX(0%); }
          100% { transform: translateX(-50%); }
        }
      `}</style>
    </div>
  );
}