import Image from 'next/image';

const collections = [
  {
    title: 'Bestsellers',
    image: '/images/collections/bestsellers.jpg', // replace with actual image path
  },
  {
    title: 'New Arrivals',
    image: '/images/collections/new-arrivals.jpg', // replace with actual image path
  },
  {
    title: 'Gift Collection',
    image: '/images/collections/gifting.jpg', // replace with actual image path
  },
];

export function Collections() {
  return (
    <div className='flex flex-row max-w-7xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
      {collections.map((collection, index) => (
        <div
          key={index}
          className='block rounded-lg overflow-hidden shadow-lg bg-white transition transform hover:scale-105 duration-300'
        >
          <Image
            src={collection.image}
            alt={collection.title}
            width={500}
            height={300}
            className='w-full object-cover'
            style={{
              maxWidth: '100%',
              height: 'auto',
            }}
          />
          <div className='p-4'>
            <h3 className='text-center text-base font-light'>
              {collection.title}
            </h3>
          </div>
        </div>
      ))}
    </div>
  );
}