import { ref } from 'vue'
import { Maximize, X } from 'lucide-vue-next'

import photo1 from '@/assets/images/main/photos-championships/1.jpg'
import photo2 from '@/assets/images/main/photos-championships/2.jpg'
import photo3 from '@/assets/images/main/photos-championships/3.jpg'
import photo4 from '@/assets/images/main/photos-championships/4.jpg'
import photo5 from '@/assets/images/main/photos-championships/5.jpg'
import photo6 from '@/assets/images/main/photos-championships/6.jpg'
import photo7 from '@/assets/images/main/photos-championships/7.jpg'
import photo8 from '@/assets/images/main/photos-championships/8.jpg'
import photo9 from '@/assets/images/main/photos-championships/9.jpg'
import photo10 from '@/assets/images/main/photos-championships/10.jpg'
import photo11 from '@/assets/images/main/photos-championships/11.jpg'
import photo12 from '@/assets/images/main/photos-championships/12.jpg'

export const albumPhotos = ref<string[]>([
  photo1,
  photo2,
  photo3,
  photo4,
  photo5,
  photo6,
  photo7,
  photo8,
  photo9,
  photo10,
  photo11,
  photo12
])

export const usePhotoChampionships = () => {
  const lightboxIndex = ref<number | null>(null)

  const openLightbox = (index: number) => {
    lightboxIndex.value = index
  }

  const closeLightbox = () => {
    lightboxIndex.value = null
  }

  return {
    albumPhotos,
    lightboxIndex,
    openLightbox,
    closeLightbox
  }
}
