// src/components/ImageCarousel.js
import React from 'react';
import clsx from 'clsx';
import styles from './ImageCarousel.module.css';

export default function ImageCarousel({ images }) {
  const [current, setCurrent] = React.useState(0);

  if (!images || images.length === 0) return null;

  return (
    <div className={styles.carousel}>
      <div className={styles.viewport}>
        {images.map((img, idx) => (
          <div
            key={idx}
            className={clsx(styles.slide, { [styles.active]: idx === current })}
          >
            <img src={img.src} alt={img.alt || `Slide ${idx + 1}`} />
            {img.caption && <div className={styles.caption}>{img.caption}</div>}
          </div>
        ))}
      </div>

      <div className={styles.thumbnails}>
        {images.map((img, idx) => (
          <button
            key={idx}
            onClick={() => setCurrent(idx)}
            className={clsx(styles.thumbnailWrapper, {
              [styles.activeThumbnail]: idx === current,
            })}
          >
            <img
              src={img.src}
              alt={`Thumbnail ${idx + 1}`}
              className={styles.thumbnail}
            />
          </button>
        ))}
      </div>
    </div>
  );
}