import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { Button, Image } from 'antd';
import React, { useRef, useState } from 'react';
import styles from './index.module.less';

const AdvancedImageGallery: React.FC<{ images: string[] }> = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const thumbnailRef = useRef<HTMLDivElement>(null);

  // 缩略图滚动
  const scrollThumbnails = (direction: 'left' | 'right') => {
    if (thumbnailRef.current) {
      const scrollAmount = direction === 'left' ? -100 : 100;
      thumbnailRef.current.scrollLeft += scrollAmount;
    }
  };

  return (
    <div className={styles.advancedGallery}>
      {/* 大图区域 */}
      <div className={styles.mainImageContainer}>
        <Image
          src={images[currentIndex]}
          alt="主图"
          width={'100%'}
          height={376}
          style={{ objectFit: 'cover' }}
        />
      </div>

      {/* 缩略图区域 */}
      <div className={styles.thumbnailContainer}>
        <Button
          icon={<LeftOutlined />}
          size="small"
          onClick={() => scrollThumbnails('left')}
          className={styles.scrollBtn}
        />

        <div ref={thumbnailRef} className={styles.thumbnailWrapper}>
          {images.map((img, index) => (
            <div
              key={`${index}${Math.random()}`}
              className={`${styles.thumbnailItem} ${
                index === currentIndex ? styles.active : ''
              }`}
              onClick={() => setCurrentIndex(index)}
            >
              <Image
                src={img}
                width={80}
                height={80}
                preview={false}
                alt={`缩略图-${index}`}
              />
            </div>
          ))}
        </div>

        <Button
          icon={<RightOutlined />}
          size="small"
          onClick={() => scrollThumbnails('right')}
          className={styles.scrollBtn}
        />
      </div>
    </div>
  );
};

export default React.memo(AdvancedImageGallery);
