import Image from 'next/image'
import { Container } from '@/components/Container'
import logoMirage from '@/images/logos/mirage.svg'
import logoStaticKit from '@/images/logos/statickit.svg'
import logoTransistor from '@/images/logos/transistor.svg'
import logoTuple from '@/images/logos/tuple.svg'

const sponsors = [
  { name: 'Transistor', logo: logoTransistor },
  { name: 'Tuple', logo: logoTuple },
  { name: 'StaticKit', logo: logoStaticKit },
  { name: 'Mirage', logo: logoMirage },
  { name: 'Transistor', logo: logoTransistor },
  { name: 'Tuple', logo: logoTuple },
  { name: 'StaticKit', logo: logoStaticKit },
  // Add more sponsors if needed
]

export function Sponsors() {
  return (
    <section id="sponsors" aria-label="Sponsors" className="mb-4 overflow-hidden">
      <Container className="mt-2 pt-2">
        <div className="animate-slide flex space-x-8 items-center lg:h-40 h-25">
          {sponsors.concat(sponsors).map((sponsor, index) => (
            <div key={index} className="flex items-center justify-center lg:h-40 lg:w-40 h-25 w-25">
              <Image 
                src={sponsor.logo} 
                alt={sponsor.name} 
                layout="intrinsic" 
                width={150} 
                height={150} 
              />
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
}