'use client'

import { useState } from 'react'
import Image from 'next/image'
import styles from './Gallery.module.css'
import Link from 'next/link'

const images = [
    '/images/gallery/gallery-1.webp',
    '/images/gallery/gallery-2.webp',
    '/images/gallery/gallery-3.webp',
    '/images/gallery/gallery-4.webp',
    '/images/gallery/gallery-5.webp',
    '/images/gallery/gallery-6.webp'
]

export default function Gallery() {
    const [lightboxOpen, setLightboxOpen] = useState(false)
    const [currentIndex, setCurrentIndex] = useState(0)

    const openLightbox = (index: number) => {
        setCurrentIndex(index)
        setLightboxOpen(true)
    }

    const closeLightbox = () => {
        setLightboxOpen(false)
    }

    const nextImage = (e: React.MouseEvent) => {
        e.stopPropagation()
        setCurrentIndex((prev) => (prev + 1) % images.length)
    }

    const prevImage = (e: React.MouseEvent) => {
        e.stopPropagation()
        setCurrentIndex((prev) => (prev - 1 + images.length) % images.length)
    }

    return (
        <section className={styles.section}>
            <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
                <Image src="/images/dinner.png" alt="Home Gallery Decorative Dinner Icon" width={24} height={24} />
                <span>GALLERY</span>
                <Image src="/images/eat.png" alt="Home Gallery Decorative Cutlery Icon" width={24} height={24} />
            </div>
            <h2 className={styles.title}>Flavour in Frames
            </h2>
            <div className={styles.grid}>
                {images.map((src, index) => (
                    <div
                        key={index}
                        className={styles.imageWrapper}
                        onClick={() => openLightbox(index)}
                    >
                        <Image
                            src={src}
                            alt={`Gallery image ${index + 1}`}
                            fill
                            style={{ objectFit: 'cover' }}
                        />
                    </div>
                ))}
            </div>
            <Link href="/antalya-restaurant-gallery" className={styles.button} prefetch={false}>View More</Link>

            {lightboxOpen && (
                <div className={styles.lightbox} onClick={closeLightbox}>
                    <div className={styles.lightboxContent} onClick={(e) => e.stopPropagation()}>
                        <button className={styles.closeBtn} onClick={closeLightbox}>×</button>
                        <button className={`${styles.navBtn} ${styles.prevBtn}`} onClick={prevImage}>‹</button>
                        <Image
                            src={images[currentIndex]}
                            alt="Gallery Preview"
                            fill
                            style={{ objectFit: 'contain' }}
                        />
                        <button className={`${styles.navBtn} ${styles.nextBtn}`} onClick={nextImage}>›</button>
                    </div>
                </div>
            )}
        </section>
    )
}
