"use client";

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

const locations = [
  {
    name: "Jaecoo 1S Kelapa Gading",
    address:
      "Jl. Boulevard Raya Blok LA 6 No. 34-35, Kelapa Gading, Jakarta Utara 14240",
    region: "Kelapa Gading, Jakarta",
    image: "/loc1.png",
  },
  {
    name: "Jaecoo Cihampelas Bandung",
    address: "Jl. Cihampelas No. 264-268, Bandung, Jawa Barat 40131",
    region: "Cihampelas, Bandung",
    image: "/loc2.png",
  },
  {
    name: "Jaecoo 2S Kelapa Gading",
    address: "Jl. Pegangsaan Dua No.17 B, Kelapa Gading, Jakarta Utara 14250",
    region: "Kelapa Gading, Jakarta",
    image: "/loc3.png",
  },
];

export default function Location() {
  const [currentPage, setCurrentPage] = useState(1);
  const perPage = 3;

  const totalPages = Math.ceil(locations.length / perPage);
  const paginated = locations.slice(
    (currentPage - 1) * perPage,
    currentPage * perPage
  );

  const handlePrev = () => {
    if (currentPage > 1) setCurrentPage(currentPage - 1);
  };

  const handleNext = () => {
    if (currentPage < totalPages) setCurrentPage(currentPage + 1);
  };

  return (
    <section className="max-w-7xl mx-auto py-16 px-6 md:px-12 bg-white">
      <div className="flex flex-col md:flex-row mx-2 items-center justify-between mb-10">
        <h2 className="text-2xl md:text-6xl font-bold text-gray-900  text-center mb-2 md:md-0">
          Cari Store Lain
        </h2>
        <div className="flex flex-row gap-3">
          <div className=" max-w-xl">
            <input
              type="text"
              placeholder="Cari lokasi..."
              className="w-full py-3 pl-5 pr-20 border border-gray-300 rounded-full text-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>{" "}
          <button className=" bg-[#00696e] text-white px-6 py-2 rounded-full font-medium">
            Cari
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {paginated.map((store, index) => (
          <div key={index} className="bg-white shadow-md overflow-hidden">
            <div className="relative w-full h-64">
              <Image
                src={store.image}
                alt={store.name}
                fill
                className="object-cover"
              />
            </div>
            <div className="p-4">
              <p className="font-semibold text-black">
                {store.name}, {store.address}
              </p>
              <p className="text-gray-500 mt-1">{store.region}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="flex items-center justify-center gap-4 mt-10">
        <button
          onClick={handlePrev}
          disabled={currentPage === 1}
          className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 disabled:opacity-50"
        >
          <ChevronLeft className="w-5 h-5" />
        </button>
        {[...Array(totalPages)].map((_, idx) => (
          <button
            key={idx}
            onClick={() => setCurrentPage(idx + 1)}
            className={`w-8 h-8 rounded-full text-sm font-medium ${
              currentPage === idx + 1
                ? "bg-[#00696e] text-white"
                : "bg-gray-100 text-gray-700 hover:bg-gray-200"
            }`}
          >
            {idx + 1}
          </button>
        ))}
        <button
          onClick={handleNext}
          disabled={currentPage === totalPages}
          className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 disabled:opacity-50"
        >
          <ChevronRight className="w-5 h-5" />
        </button>
      </div>
    </section>
  );
}