'use client';

import Image from 'next/image';
import { useEffect, useState } from 'react';
import styles from '../styles/ImageCarousel.module.css';

type Slide = {
  src: string;
  alt: string;
};

const slides: Slide[] = [
  {
    src: '/images/plateforme/hero/hero-01.webp',
    alt: 'JoBBond – Compétences critiques',
  },
  {
    src: '/images/plateforme/hero/hero-02.webp',
    alt: 'JoBBond – Talents expérimentés',
  },
  {
    src: '/images/plateforme/hero/hero-03.webp',
    alt: 'JoBBond – Transmission et continuité',
  },
];

export default function ImageCarousel() {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % slides.length);
    }, 5000);

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

  return (
    <div className={styles.shell}>
      {slides.map((slide, i) => (
        <div
          key={slide.src}
          className={`${styles.frame} ${
            i === index ? styles.frameActive : ''
          }`}
        >
          <Image
            src={slide.src}
            alt={slide.alt}
            fill
            className={styles.img}
            priority={i === 0}
          />
        </div>
      ))}
    </div>
  );
}