"use client";

import Image from "next/image";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useEffect, useState } from "react";
import { heroSlides } from "@/data/yapaylisans";

export function HeroCarousel() {
  const [active, setActive] = useState(0);

  useEffect(() => {
    const id = window.setInterval(() => setActive((value) => (value + 1) % heroSlides.length), 5000);
    return () => window.clearInterval(id);
  }, []);

  const move = (offset: number) => setActive((value) => (value + offset + heroSlides.length) % heroSlides.length);

  return (
    <section className="hero-shell" aria-label="Kampanyalar">
      {heroSlides.map((slide, index) => (
        <a className={`hero-slide ${index === active ? "active" : ""}`} href={slide.href} key={slide.image} aria-hidden={index !== active}>
          <Image src={slide.image} alt={slide.title} fill priority={index === 0} sizes="(max-width: 768px) 100vw, 1140px" />
        </a>
      ))}
      <button className="hero-arrow left" type="button" onClick={() => move(-1)} aria-label="Önceki kampanya"><ChevronLeft /></button>
      <button className="hero-arrow right" type="button" onClick={() => move(1)} aria-label="Sonraki kampanya"><ChevronRight /></button>
      <div className="hero-dots">
        {heroSlides.map((slide, index) => (
          <button type="button" key={slide.image} className={index === active ? "active" : ""} onClick={() => setActive(index)} aria-label={`${index + 1}. kampanya`} />
        ))}
      </div>
    </section>
  );
}