import { useState } from 'react';
import { View, Image, Swiper, SwiperItem } from '@tarojs/components';

type ProductCarouselProps = {
  images: string[];
  alt: string;
  variant?: 'home' | 'detail' | 'store';
};

/** 商品/门店轮播（对齐 h5 ProductCarousel 三变体） */
export default function ProductCarousel({ images, alt, variant = 'detail' }: ProductCarouselProps) {
  const slides = images.length > 0 ? images : [''];
  const [activeIndex, setActiveIndex] = useState(0);
  const prefix =
    variant === 'store' ? 'store-detail-carousel' : variant === 'home' ? 'home-carousel' : 'detail-carousel';

  return (
    <View className={`${prefix}-wrap`}>
      <Swiper
        className={prefix}
        circular={slides.length > 1}
        onChange={(e) => setActiveIndex(e.detail.current)}
      >
        {slides.map((src, index) => (
          <SwiperItem key={`${src}-${index}`} className={`${prefix}-item`}>
            {src ? (
              <Image className={`${prefix}-image`} src={src} mode="aspectFill" alt={alt} />
            ) : (
              <View className={`${prefix}-placeholder`} />
            )}
          </SwiperItem>
        ))}
      </Swiper>
      {slides.length > 1 ? (
        <View className={`${prefix}-dots`}>
          {slides.map((_, index) => (
            <View
              key={index}
              className={`${prefix}-dot${index === activeIndex ? ` ${prefix}-dot--active` : ''}`}
            />
          ))}
        </View>
      ) : null}
    </View>
  );
}