import { ImageWithFallback } from './figma/ImageWithFallback';
import amazonLogo from '../assets/cc387e616b2e6552715d051e5c9a41e1a1637857.png';
import amdLogo from '../assets/f9d75a20370022ef4bcdb5f3d08841527703cee6.png';
import spotifyLogo from '../assets/84f4f124e1476f3bb1eee24bc4c0fa75f1fed2a8.png';
import logo4 from '../assets/eb1420e4d74097842eb197fc60970d29fa0afd1f.png';
import logo5 from '../assets/01db7df74b38a6ea709f973ff1a3ce03c9a5a75d.png';
import logo6 from '../assets/26f0daececd90e6473f4b370af7b26b7fb2a67ad.png';

const companyLogos = [
  {
    name: 'Amazon',
    image: amazonLogo,
  },
  {
    name: 'AMD',
    image: amdLogo,
  },
  {
    name: 'Spotify',
    image: spotifyLogo,
  },
  {
    name: 'Partner 4',
    image: logo4,
  },
  {
    name: 'Partner 5',
    image: logo5,
  },
  {
    name: 'Partner 6',
    image: logo6,
  },
];

export function TrustedCompanies() {
  // Duplicate the logos 4 times for seamless infinite scroll
  const allLogos = [
    ...companyLogos,
    ...companyLogos,
    ...companyLogos,
    ...companyLogos,
  ];

  return (
    <div className="w-full overflow-hidden py-12 flex items-center justify-center">
      <div className="flex gap-16 items-center justify-center animate-moveLeft hover:pause">
        {allLogos.map((company, index) => (
          <div
            key={`${company.name}-${index}`}
            className="flex-shrink-0 flex items-center justify-center transition-all duration-300 opacity-70 hover:opacity-100"
            style={{ minWidth: '120px', height: '80px' }}
          >
            <ImageWithFallback
              src={company.image}
              alt={company.name}
              className="max-h-full max-w-full object-contain"
            />
          </div>
        ))}
      </div>
    </div>
  );
}