import Image from 'next/image';

const logos = [
  { src: '/images/spotlight/toi.png', alt: 'TOI' },
  { src: '/images/spotlight/tribune.png', alt: 'The Tribune' },
  { src: '/images/spotlight/et.png', alt: 'ET' },
  { src: '/images/spotlight/hindu.png', alt: 'The Hindu' },
];

export function Spotlight() {
  return (
    <div className='flex flex-row justify-center items-center space-x-8 pb-16'>
      {logos.map((logo, index) => (
        <div key={index} className='flex flex-col items-center'>
          <div className='w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center'>
            <Image src={logo.src} alt={logo.alt} width={80} height={80} className='w-full h-auto object-contain' />
          </div>
        </div>
      ))}
    </div>
  );
}