// assets/controllers/news_carroussel_controller.js
import { Controller } from "@hotwired/stimulus";
import Swiper from "swiper";
import { Navigation, Pagination } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

export default class extends Controller {
  connect() {
    this.swiper = new Swiper(this.element, {
      modules: [Navigation, Pagination],
      slidesPerView: 1,
      spaceBetween: 24,
      loop: true,

      pagination: {
        el: ".swiper-pagination",
        clickable: true,
        dynamicBullets: true,
      },

      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  }

  disconnect() {
    if (this.swiper) {
      this.swiper.destroy();
    }
  }
}