import React, { useState } from "react";
import IndicatorDots from "@/components/common/IndicatorDots";

const Gallery: React.FC = () => {
  // FIXME : public/image/gallery 경로에 사진 추가하면 됨 
  const images: string[] = [
    "/image/gallery/hero.jpg",
    "/image/gallery/hero.jpg",
    "/image/gallery/hero.jpg",
  ];

  const [currentIndex, setCurrentIndex] = useState(0);

  const handlePrev = () => {
    setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
  };

  const handleNext = () => {
    setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
  };

  const handleDotClick = (index: number) => {
    setCurrentIndex(index);
  };

  return (
    <div className="relative flex flex-col items-center max-w-7xl mx-auto mt-15 mb-10 space-y-10">
      <img
        className="w-full h-[849px] object-cover"
        src={images[currentIndex]}
        alt={`slide-${currentIndex}`}
      />

      {/* 인디케이터 Dots */}
      <div className="absolute z-10 bottom-[12vh]">
        <IndicatorDots
          count={images.length}
          activeIndex={currentIndex}
          onClick={handleDotClick}
        />
      </div>

      <div className="text-black text-4xl font-bold font-['Noto_Sans_KR']">
        김해지사 전경
      </div>

      {/* 화살표 */}
      <div className="absolute inset-0 pointer-events-none">
        <div
          className="absolute top-1/2 left-10 -translate-y-1/2 cursor-pointer pointer-events-auto"
          onClick={handlePrev}
        >
          <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center">
            <div className="text-black text-2xl font-thin">{'<'}</div>
          </div>
        </div>
        <div
          className="absolute top-1/2 right-10 -translate-y-1/2 cursor-pointer pointer-events-auto"
          onClick={handleNext}
        >
          <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center">
            <div className="text-black text-2xl font-thin">{'>'}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Gallery;
