import React, { useState } from 'react';
import './Carousel.css';

const Carousel = ({ items }) => {
  const [activeIndex, setActiveIndex] = useState(2); // Start with middle item

  const handleNext = () => {
    setActiveIndex((prev) => (prev + 1) % items.length);
  };

  const handlePrev = () => {
    setActiveIndex((prev) => (prev - 1 + items.length) % items.length);
  };

  const handleItemClick = (url) => {
    window.location.href = url;
  };

  // Function to get the position class for each item
  const getPositionClass = (index) => {
    const diff = index - activeIndex;
    const length = items.length;

    // Normalize difference to handle circular array
    let normalizedDiff = diff;
    if (Math.abs(diff) > length / 2) {
      normalizedDiff = diff > 0 ? diff - length : diff + length;
    }

    if (normalizedDiff === 0) {
      return 'active-item'; // Center
    } else if (normalizedDiff === -1) {
      return 'left-item'; // Immediate left
    } else if (normalizedDiff === 1) {
      return 'right-item'; // Immediate right
    } else if (normalizedDiff === -2) {
      return 'far-left-item'; // Far left
    } else if (normalizedDiff === 2) {
      return 'far-right-item'; // Far right
    } else {
      return 'hidden-item'; // Hidden
    }
  };

  return (
    <section className="relative py-4 px-4 bg-white">
      <div className="container mx-auto">
        {/* Carousel Container */}
        <div className="relative flex items-center justify-center min-h-[380px]">
          {/* Carousel Items */}
          <div className="relative w-full max-w-6xl h-[400px] flex items-center justify-center">
            {/* Left Arrow - positioned next to center item */}
            <button
              onClick={handlePrev}
              className="absolute left-1/2 -translate-x-[220px] z-30 transition-all duration-200 hover:scale-110"
              aria-label="Previous"
            >
              <img
                src="/images/flecha-izq.png"
                alt="Previous"
                className="w-12 h-12"
              />
            </button>
            {items.map((item, index) => {
              const positionClass = getPositionClass(index);

              return (
                <div
                  key={item.id}
                  className={`carousel-item ${positionClass}`}
                  onClick={() => activeIndex === index && handleItemClick(item.url)}
                >
                  {/* Circular Image Container */}
                  <div className="relative">
                    {/* Circle with gradient background */}
                    <div className="circle-container">
                      <div className="circle-inner">
                        {/* Image placeholder with gradient */}
                        <div className="w-full h-full rounded-full bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 flex items-center justify-center overflow-hidden">
                          <img
                            src={item.img}
                            alt={item.subtitle}
                            className="w-full h-full object-cover"
                            onError={(e) => {
                              // Fallback if image doesn't load
                              e.target.style.display = 'none';
                              e.target.parentElement.innerHTML = `
                                <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-banorte-blue to-banorte-red">
                                  <span class="text-white text-2xl font-bold">${item.subtitle.charAt(0)}</span>
                                </div>
                              `;
                            }}
                          />
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Text Below Circle */}
                  <div className="text-center mt-6 space-y-1">
                    <p className="text-banorte-blue font-bold tracking-wide item-title">
                      {item.title}
                    </p>
                    <p className="text-banorte-red font-bold tracking-wider item-subtitle">
                      {item.subtitle}
                    </p>
                  </div>
                </div>
              );
            })}

            {/* Right Arrow - positioned next to center item */}
            <button
              onClick={handleNext}
              className="absolute left-1/2 translate-x-[168px] z-30 transition-all duration-200 hover:scale-110"
              aria-label="Next"
            >
              <img
                src="/images/flecha-der.png"
                alt="Next"
                className="w-12 h-12"
              />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Carousel;
