"use client";

import { useEffect, useState } from "react";
import type { CarouselApi } from "@/components/ui/carousel";

export default function CurrentSlide({
  api,
  total = 3,
}: {
  api?: CarouselApi;
  total?: number;
}) {
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    if (!api) return;

    // Set initial slide
    setCurrent(api.selectedScrollSnap());

    const handler = () => setCurrent(api.selectedScrollSnap());
    api.on("select", handler);

    return () => api.off("select", handler);
  }, [api]);

  const handleClick = (index: number) => {
    if (!api) return;
    api.scrollTo(index); // embla API command to jump to slide
  };

  return (
    <div className="flex items-center justify-center w-full gap-8 py-6">
      {Array.from({ length: total }).map((_, i) => {
        const isActive = i === current;

        return (
          <button
            key={i}
            onClick={() => handleClick(i)}
            className="flex flex-col items-center gap-2 cursor-pointer group"
          >
            {/* Outer ring */}
            <div
              className={`
                relative w-10 h-10 rounded-full border transition-all duration-300 
                ${isActive ? "border-[#C74C65]" : "border-[#C74C65]/40"}
                group-hover:border-[#C74C65]
              `}
            >
              {/* Inner dot (only active) */}
              {isActive && (
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="w-3 h-3 rounded-full bg-[#C74C65]" />
                </div>
              )}
            </div>

            {/* Slide number */}
            <span
              className={`
                font-lato text-md tracking-widest transition-colors duration-300
                ${
                  isActive
                    ? "text-[#C74C65]"
                    : "text-[#C74C65]/40 group-hover:text-[#C74C65]"
                }
              `}
            >
              {String(i + 1).padStart(2, "0")}
            </span>
          </button>
        );
      })}
    </div>
  );
}