'use client'
import React from 'react'
import { Gallery } from 'react-grid-gallery'

function shuffleArray(array: any) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[array[i], array[j]] = [array[j], array[i]]
  }
  return array
}

function Page() {
  const images = [
    {
      src: '/brand/1.jpg',
      width: 320,
      height: 212,
      alt: 'Brand Image 1',
    },
    {
      src: '/brand/2.jpg',
      width: 320,
      height: 212,
      alt: 'Brand Image 2',
    },
    {
      src: '/brand/3.jpg',
      width: 320,
      height: 212,
      alt: 'Brand Image 3',
    },
    {
      src: '/brand/4.jpg',
      width: 320,
      height: 212,
      alt: 'Brand Image 4',
    },
    {
      src: '/multi-carousel/1.png',
      width: 320,
      height: 212,
      alt: 'Carousel Image 1',
    },
    {
      src: '/multi-carousel/2.png',
      width: 320,
      height: 212,
      alt: 'Carousel Image 2',
    },
    {
      src: '/multi-carousel/3.png',
      width: 320,
      height: 212,
      alt: 'Carousel Image 3',
    },
    {
      src: '/multi-carousel/4.png',
      width: 320,
      height: 212,
      alt: 'Carousel Image 4',
    },
    {
      src: '/multi-carousel/5.png',
      width: 320,
      height: 212,
      alt: 'Carousel Image 5',
    },
    {
      src: '/multi-carousel/6.png',
      width: 320,
      height: 212,
      alt: 'Carousel Image 6',
    },
    {
      src: '/multi-carousel/7.png',
      width: 320,
      height: 212,
      alt: 'Carousel Image 7',
    },
    {
      src: '/multi-carousel/8.png',
      width: 320,
      height: 212,
      alt: 'Carousel Image 8',
    },
    {
      src: '/restaurant-bar/1.jpg',
      width: 320,
      height: 212,
      alt: 'Restaurant Bar Image 1',
    },
    {
      src: '/restaurant-bar/2.jpg',
      width: 320,
      height: 212,
      alt: 'Restaurant Bar Image 2',
    },
    {
      src: '/restaurant-bar/3.jpg',
      width: 320,
      height: 212,
      alt: 'Restaurant Bar Image 3',
    },
    {
      src: '/restaurant-bar/4.jpg',
      width: 320,
      height: 212,
      alt: 'Restaurant Bar Image 4',
    },
    {
      src: '/restaurant-bar/5.jpg',
      width: 320,
      height: 212,
      alt: 'Restaurant Bar Image 5',
    },
    {
      src: '/restaurant-bar/6.jpg',
      width: 320,
      height: 212,
      alt: 'Restaurant Bar Image 6',
    },
    {
      src: '/restaurant-bar/7.jpg',
      width: 320,
      height: 212,
      alt: 'Restaurant Bar Image 7',
    },
    {
      src: '/restaurant-bar/8.jpg',
      width: 320,
      height: 212,
      alt: 'Restaurant Bar Image 8',
    },
    {
      src: '/restaurant-bar/9.jpg',
      width: 320,
      height: 212,
      alt: 'Restaurant Bar Image 9',
    },
  ]

  const shuffledImages = shuffleArray(images).slice(0, 10)

  return (
    <div>
      <Gallery
        margin={10}
        images={shuffledImages.map((image: any) => ({
          ...image,
          // customOverlay: (
          //   <div onClick={()=>{}} className="relative">
          //     <img

          //       className="image-gradient hover:scale-0"
          //       src={image.src}
          //       style={{ width: image.width, height: image.height }}
          //       alt={image.alt}
          //     />
          //   </div>
          // ),
        }))}
      />
    </div>
  )
}

export default Page