import React, { useState } from 'react';
import LeftArrow from './LeftArrow';
import RightArrow from './RightArrow';

interface MultipleImageDisplayProps {
  imageUrls: string[];
  title: string;
  themeColor: string;
}

const MultipleImageDisplay: React.FC<MultipleImageDisplayProps> = ({ imageUrls, title, themeColor }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handlePrev = () => {
    setCurrentIndex(prev => (prev === 0 ? imageUrls.length - 1 : prev - 1));
  };

  const handleNext = () => {
    setCurrentIndex(prev => (prev === imageUrls.length - 1 ? 0 : prev + 1));
  };

  // 计算显示的图片索引
  const getDisplayImages = () => {
    const prevIndex = currentIndex === 0 ? imageUrls.length - 1 : currentIndex - 1;
    const nextIndex = currentIndex === imageUrls.length - 1 ? 0 : currentIndex + 1;

    return [
      { index: prevIndex, isActive: false, position: 'left' },
      { index: currentIndex, isActive: true, position: 'center' },
      { index: nextIndex, isActive: false, position: 'right' }
    ];
  };

  const displayImages = getDisplayImages();

  return (
    <>
      {/* 图片展示区域 - 三图布局 */}
      <div className="flex items-center justify-center h-full">
        <div className="w-[1357px] h-[640px] relative rounded-[20px] overflow-hidden">
          <div className="absolute left-[1058px] top-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex justify-start items-center gap-5">
            {displayImages.map(({ index, isActive, position }) => (
              <div
                key={index}
                className={`relative rounded-[10px] overflow-hidden transition-all duration-300 ${
                  isActive
                    ? 'w-[940px] h-[600px] z-10'
                    : position === 'left'
                      ? 'w-[300px] h-[550px] -ml-[751px] opacity-70'
                      : 'w-[300px] h-[550px] opacity-70'
                }`}
              >
                <img
                  data-layer={`${title} ${index + 1}`}
                  className={`w-full h-full object-cover ${
                    !isActive && position === 'left' ? 'scale-110' : ''
                  }`}
                  src={imageUrls[index]}
                  alt={`${title} ${index + 1}`}
                />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 左右箭头按钮 */}
      <div
        data-layer="按钮"
        className="fixed w-[1510px] left-1/2 top-[288.72px] transform -translate-x-1/2 inline-flex justify-between items-center"
      >
        {/* 左箭头 */}
        <LeftArrow
          themeColor={themeColor}
          onClick={handlePrev}
        />

        {/* 右箭头 */}
        <RightArrow
          themeColor={themeColor}
          onClick={handleNext}
        />
      </div>
    </>
  );
};

export default MultipleImageDisplay;