'use client';

import React, { useEffect, useRef, useState } from 'react';
import Image from 'next/image';

const cardData = [
  {
    imgSrc: '/gems-world-card.webp',
    title: 'Detail 1',
    points: ['Cashback up to 5%', 'No Annual Fee', 'Airport Lounge Access'],
    id: 1,
  },
  {
    imgSrc: '/du-titanium-credit-card-2.webp',
    title: 'Detail 2',
    points: ['Earn Reward Points', 'Fuel Discounts', 'Dining Offers'],
    id: 2,
  },
  {
    imgSrc: '/fab-cashback-credit-card.webp',
    title: 'Detail 3',
    points: ['1% Cashback on All Purchases', 'Low Interest Rate', 'Free Movie Tickets'],
    id: 3,
  },
  {
    imgSrc: '/fab-low-rate-credit-card.webp',
    title: 'Detail 4',
    points: ['0% Balance Transfer', 'No Foreign Transaction Fee', 'Bonus Points on Signup'],
    id: 4,
  },
  {
    imgSrc: '/du-titanium-credit-card-2.webp',
    title: 'Detail 5',
    points: ['Exclusive Travel Benefits', 'Hotel Discounts', 'Priority Customer Support'],
    id: 5,
  },
  {
    imgSrc: '/fab-cashback-credit-card.webp',
    title: 'Detail 3',
    points: ['1% Cashback on All Purchases', 'Low Interest Rate', 'Free Movie Tickets'],
    id: 6,
  },
  {
    imgSrc: '/fab-low-rate-credit-card.webp',
    title: 'Detail 4',
    points: ['0% Balance Transfer', 'No Foreign Transaction Fee', 'Bonus Points on Signup'],
    id: 7,
  },
  {
    imgSrc: '/du-titanium-credit-card-2.webp',
    title: 'Detail 5',
    points: ['Exclusive Travel Benefits', 'Hotel Discounts', 'Priority Customer Support'],
    id: 8,
  },
  {
    imgSrc: '/gems-world-card.webp',
    title: 'Detail 1',
    points: ['Cashback up to 5%', 'No Annual Fee', 'Airport Lounge Access'],
    id: 9,
  },
  {
    imgSrc: '/du-titanium-credit-card-2.webp',
    title: 'Detail 2',
    points: ['Earn Reward Points', 'Fuel Discounts', 'Dining Offers'],
    id: 10,
  },
];

const CardOfferFirst: React.FC = () => {
  const carouselRef = useRef<HTMLDivElement>(null);
  const [activeIndex, setActiveIndex] = useState(0);
  const [cardsPerSlide, setCardsPerSlide] = useState(5); // Default for desktop

  // Function to determine number of cards per slide
  const updateCardsPerSlide = () => {
    if (window.innerWidth <= 640) {
      setCardsPerSlide(1); // Mobile - 1 card
    } else if (window.innerWidth <= 1024) {
      setCardsPerSlide(1); // Tablet - 1 card
    } else {
      setCardsPerSlide(5); // Desktop - 5 cards
    }
  };

  useEffect(() => {
    updateCardsPerSlide(); // Set on load
    window.addEventListener('resize', updateCardsPerSlide);
    return () => window.removeEventListener('resize', updateCardsPerSlide);
  }, []);

  const totalSlides = Math.ceil(cardData.length / cardsPerSlide);

  // Auto-scroll logic (moves forward, loops back)
  useEffect(() => {
    const interval = setInterval(() => {
      setActiveIndex((prev) => (prev + 1) % totalSlides);
    }, 10000); // 10 seconds delay before moving

    return () => clearInterval(interval);
  }, [totalSlides]);

  // Scroll effect
  useEffect(() => {
    if (carouselRef.current) {
      carouselRef.current.scrollTo({
        left: activeIndex * carouselRef.current.clientWidth,
        behavior: 'smooth',
      });
    }
  }, [activeIndex]);

  return (
    <section className="py-5 bg-gray-100">
      <h2 className="text-center mb-6 text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 text-transparent bg-clip-text">
        Best Cash Back Card
      </h2>

      {/* ✅ Carousel Wrapper */}
      <div ref={carouselRef} className="flex overflow-hidden scroll-smooth px-4">
        {cardData.map((card, index) => (
          <div
            key={index}
            className={`flex-shrink-0 bg-white shadow-lg rounded-lg p-4 flex flex-col justify-between 
              ${cardsPerSlide === 1 ? 'w-[90vw]' : 'w-1/5'}`} // Mobile: Larger cards, Desktop: 5 per row
          >
            {/* ✅ Image */}
            {/* <Image src={card.imgSrc} width={200} height={120} alt={card.title} className="rounded-lg w-full h-32 object-cover" /> */}
            <Image
  src={card.imgSrc}
  width={200}
  height={120}
  alt={card.title}
  className="rounded-lg w-full object-contain sm:h-40 md:h-36 lg:h-32"
/>

            {/* ✅ Title */}
            <h5 className="text-md font-semibold text-center mt-2">{card.title}</h5>

            {/* ✅ Bulleted List */}
            <ul className="text-sm text-gray-700 mt-2 pl-4 list-disc">
              {card.points.map((point, i) => (
                <li key={i}>{point}</li>
              ))}
            </ul>

            {/* ✅ Buttons */}
            <div className="flex justify-between mt-4">
              <a href={`card/${card.id}`} className="border border-blue-500 text-blue-500 px-3 py-1 text-sm rounded-md hover:bg-blue-500 hover:text-white">
                Know More
              </a>
              <a href="#" className="border border-red-500 text-red-500 px-3 py-1 text-sm rounded-md hover:bg-red-500 hover:text-white">
                Apply Now
              </a>
            </div>
          </div>
        ))}
      </div>

      {/* ✅ Dots Navigation */}
      <div className="flex justify-center mt-4">
        {Array.from({ length: totalSlides }).map((_, i) => (
          <button
            key={i}
            className={`w-3 h-3 mx-1 rounded-full transition-all ${activeIndex === i ? 'bg-blue-500 w-4' : 'bg-gray-300'}`}
            onClick={() => setActiveIndex(i)}
          ></button>
        ))}
      </div>
    </section>
  );
};

export default CardOfferFirst;