"use client";

import { motion } from "framer-motion";
import type Lenis from "@studio-freight/lenis";
import { gaEvent } from "../../lib/ga"; // ✅ dopasuj ścieżkę jeśli ScrollDots jest gdzie indziej

interface Props {
  currentIndex: number;
  sections: string[];
  lenis: Lenis | null;
  sectionRefs: (HTMLElement | null)[];
}

export default function ScrollDots({ currentIndex, sections, lenis, sectionRefs }: Props) {
  const handleDotClick = (index: number) => {
    const target = sectionRefs[index];

    gaEvent("scroll_dot_click", {
      from_index: currentIndex,
      to_index: index,
      from_section: sections[currentIndex] ?? "unknown",
      to_section: sections[index] ?? "unknown",
    });

    if (target && lenis) {
      lenis.scrollTo(target, {
        offset: 0,
        duration: 1.1,
        easing: (t: number) => 1 - Math.pow(1 - t, 3),
      });
    }
  };

  return (
      <div className="fixed right-4 top-1/2 -translate-y-1/2 z-50 flex flex-col items-center gap-4">
        {sections.map((label, index) => {
          const isActive = index === currentIndex;

          return (
              <button
                  key={`${label}-${index}`}
                  onClick={() => handleDotClick(index)}
                  className="group focus:outline-none"
                  aria-label={`Przewiń do sekcji: ${label || `Sekcja ${index + 1}`}`}
              >
                <motion.div
                    className="w-4 h-4 rounded-full transition-all duration-300 border-2"
                    animate={{
                      backgroundColor: isActive ? "#eea71f" : "transparent",
                      borderColor: isActive ? "#eea71f" : "#ffffff70",
                      scale: isActive ? 1.3 : 1,
                    }}
                    transition={{ type: "spring", stiffness: 300, damping: 20 }}
                />
              </button>
          );
        })}
      </div>
  );
}