'use client';

import CarouselNavigator from "@/components/ui/carousel-navigator";
import { useState, useEffect } from "react";

export default function CarouselNavigatorDemo() {
  const [currentIndex, setCurrentIndex] = useState(0);

  const totalSlides = 4;
  const autoDelay = 4000;


  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % totalSlides);
    }, autoDelay);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-6 bg-background p-10">

      {/* Carousel Navigator */}
      <CarouselNavigator
        totalSlides={totalSlides}
        autoDelay={autoDelay}
        currentIndex={currentIndex}
        onIndexChange={setCurrentIndex}
      />
      
    </div>
  );
}