'use client'
import Layout from "@/components/layout/Layout"
import { useState } from "react"
import Link from "next/link"
import { galleryImages } from "@/utils/constant.utils"

export default function WhyChooseUs() {
    const itemsPerPage = 6
    const [currentPage, setCurrentPage] = useState(1)

    const indexOfLastImage = currentPage * itemsPerPage
    const indexOfFirstImage = indexOfLastImage - itemsPerPage
    const currentImages = galleryImages.slice(indexOfFirstImage, indexOfLastImage)

    const totalPages = Math.ceil(galleryImages.length / itemsPerPage)

    const handlePageChange = (page) => {
        if (page > 0 && page <= totalPages) {
            setCurrentPage(page)
        }
    }

    return (
        <>
            <section className="gallery-page-section sec-pad-2">
                <div className="auto-container">
                    <div className="row clearfix">
                        {currentImages.map((src, index) => (
                            <div key={index} className="col-lg-4 col-md-6 col-sm-12 gallery-block">
                                <div className="gallery-block-one">
                                    <div className="inner-box">
                                        <figure className="image-box">
                                            <img src={src} alt={`gallery-${index}`} />
                                        </figure>
                                        <div className="view-btn">
                                            <Link href={src} className="lightbox-image" data-fancybox="gallery" aria-label="View btn icon">
                                                <i className="icon-4"></i>
                                            </Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>

                    <div className="pagination-wrapper mt_20 centred">
                        <ul className="pagination clearfix">
                            {currentPage > 1 && (
                                <li className="prev">
                                    <Link
                                        href="#"
                                        onClick={(e) => {
                                            e.preventDefault()
                                            handlePageChange(currentPage - 1)
                                        }}
                                    aria-label="Gallery left image">
                                        <img src="/assets/images/gallery/left.png" alt="Previous" />
                                    </Link>
                                </li>
                            )}

                            {[...Array(totalPages)].map((_, i) => (
                                <li key={i}>
                                    <Link
                                        href="#"
                                        onClick={(e) => {
                                            e.preventDefault()
                                            handlePageChange(i + 1)
                                        }}
                                        className={currentPage === i + 1 ? "current" : ""}
                                    aria-label="Gallery list">
                                        {i + 1}
                                    </Link>
                                </li>
                            ))}

                            {currentPage < totalPages && (
                                <li className="next">
                                    <Link
                                        href="#"
                                        onClick={(e) => {
                                            e.preventDefault()
                                            handlePageChange(currentPage + 1)
                                        }}
                                    aria-label="Gallery right image">
                                        <img src="/assets/images/gallery/right.png" alt="Previous" />
                                    </Link>
                                </li>
                            )}
                        </ul>
                    </div>
                </div>
            </section>
        </>
    )
}