import Image from 'next/image'
import logo1 from '@/images/logos/1.svg'
import logo2 from '@/images/logos/2.svg'
import logo3 from '@/images/logos/3.svg'
import logo4 from '@/images/logos/4.svg'
import logo5 from '@/images/logos/5.svg'
import logo6 from '@/images/logos/6.svg'

export function LogoPage() {
  const logos = [
    { name: 'CNN', logo: logo1 },
    { name: 'HLS', logo: logo2 },
    { name: 'Bookretreats', logo: logo3 },
    { name: 'Beaviajera', logo: logo4 },
    { name: 'Egytalloyd', logo: logo5 },
    { name: 'AST', logo: logo6 },
  ]

  return (
    <div className="relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-white" />
      <div className="relative flex items-center justify-center">
        <ul
          role="list"
          className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-10 sm:flex-col sm:gap-y-10 xl:flex-row xl:gap-x-12"
        >
          {logos.map((company, index) => (
            <li key={index} className="flex">
              <Image
                src={company.logo}
                alt={`${company.name} logo`}
                width={100}  // Adjust the width and height according to your design
                height={50}  // Adjust the width and height according to your design
              />
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}