"use client";

import { useState } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight } from "lucide-react";

const imagesPerPage = 6;

const galleryImages = [
  "/gl1.png",
  "/gl2-new.png",
  "/gl3.png",
  "/gl4.png",
  "/gl5.png",
  "/gl6.png",
  "/gl7.png",
  "/gl8.png",
  "/gl9.png",
];

export default function GallerySection() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = Math.ceil(galleryImages.length / imagesPerPage);

  const paginatedImages = galleryImages.slice(
    (currentPage - 1) * imagesPerPage,
    currentPage * imagesPerPage
  );

  return (
    <section className="py-16 px-4 max-w-[1400px] mx-auto">
      <h2 className="text-4xl font-bold mb-8">Galeri Kami</h2>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        {paginatedImages.map((img, index) => (
          <div key={index} className="relative w-full aspect-[3/2]">
            <Image
              src={img}
              alt={`gallery-${index}`}
              fill
              className="object-cover"
            />
          </div>
        ))}
      </div>

      <div className="flex items-center justify-center gap-2 mt-10">
        <button
          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
          disabled={currentPage === 1}
          className="p-2 rounded-md hover:bg-gray-200 disabled:opacity-30"
        >
          <ChevronLeft />
        </button>
        {[...Array(totalPages)].map((_, i) => (
          <button
            key={i}
            onClick={() => setCurrentPage(i + 1)}
            className={`w-8 h-8 rounded-md border text-sm ${
              currentPage === i + 1
                ? "bg-[#1F6779] text-white"
                : "text-gray-700 hover:bg-gray-100"
            }`}
          >
            {i + 1}
          </button>
        ))}
        <button
          onClick={() =>
            setCurrentPage((prev) => Math.min(prev + 1, totalPages))
          }
          disabled={currentPage === totalPages}
          className="p-2 rounded-md hover:bg-gray-200 disabled:opacity-30"
        >
          <ChevronRight />
        </button>
      </div>
    </section>
  );
}