'use client';

import React from 'react';

interface Logo {
  id: string | number;
  svg: React.ReactNode;
}

interface LogoCloudProps {
  logos: Logo[];
  className?: string;
}

const LogoCloud = ({ logos, className = '' }: LogoCloudProps) => {
  return (
    <div
      className={`group relative w-full overflow-hidden bg-transparent ${className}`}
      style={{
        maskImage:
          'linear-gradient(to right, transparent 0%, transparent 20%, black 35%, black 65%, transparent 80%, transparent 100%)',
        WebkitMaskImage:
          'linear-gradient(to right, transparent 0%, transparent 20%, black 35%, black 65%, transparent 80%, transparent 100%)',
      }}
    >
      <div className='logo-marquee'>
        {[...logos, ...logos].map((logo, idx) => (
          <span key={logo.id + '-' + idx} className='inline-block px-3 md:px-6'>
            <span className='flex h-12 w-24 items-center justify-center grayscale transition-all duration-300 hover:grayscale-0 md:h-16 md:w-32'>
              {logo.svg}
            </span>
          </span>
        ))}
      </div>
      <style jsx>{`
        .logo-marquee {
          display: inline-flex;
          white-space: nowrap;
          min-width: 100%;
          animation: marquee 30s linear infinite;
        }
        .group:hover .logo-marquee {
          animation-play-state: paused;
        }
        @keyframes marquee {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(-50%);
          }
        }
      `}</style>
    </div>
  );
};

export default LogoCloud;