// components/Spotlight.tsx
import Image from 'next/image';

const logos = [
  { src: '/images/logo.png', alt: 'TOI' }, // Replace with actual logo path
  { src: '/images/logo.png', alt: 'The Tribune' }, // Replace with actual logo path
  { src: '/images/logo.png', alt: 'ET' }, // Replace with actual logo path
  { src: '/images/logo.png', alt: 'The Hindu' }, // Replace with actual logo path
];
//   { src: '/images/logos/toi-logo.png', alt: 'TOI' }, // Replace with actual logo path
//   { src: '/images/logos/tribune-logo.png', alt: 'The Tribune' }, // Replace with actual logo path
//   { src: '/images/logos/et-logo.png', alt: 'ET' }, // Replace with actual logo path
//   { src: '/images/logos/hindu-logo.png', alt: 'The Hindu' }, // Replace with actual logo path

export function Spotlight() {
  return (
    <div className='flex flex-row justify-center items-center space-x-8 py-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='object-contain'
            />
          </div>
        </div>
      ))}
    </div>
  );
}

// return (
//     <div className="flex flex-col items-center py-16">
//       <h2 className="text-3xl font-semibold mb-8">In the Spotlight</h2>
//       <div className="flex justify-center space-x-8">
//         {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="object-contain" />
//             </div>
//           </div>
//         ))}
//       </div>
//     </div>
//   );