"use client"; // <-- This line is crucial

import React, { useState, useEffect, useRef } from 'react';
import clsx from 'clsx';

const cards = [
  {
    image: '/images/act1.png',
    title: 'Yoga',
    description: 'Step fully into your body. The perfect start to the morning.',
  },
  {
    image: '/images/act2.png',
    title: 'Nutrition',
    description: 'Discover a variety of dietary options tailored to your health and wellness needs.',
  },
  {
    image: '/images/act3.png',
    title: 'Meditation',
    description: 'Enhance your mental clarity and inner peace through guided meditation practices.',
  },
  {
    image: '/images/act4.png',
    title: 'Massage',
    description: 'Profound relaxation through massage sessions, harmonizing with the high energies of Egypt.',
  },
  {
    image: '/images/act5.png',
    title: 'Workshops',
    description: 'Healing sessions and workshops designed to enrich your well-being',
  },
  {
    image: '/images/act6.png',
    title: 'Excursions',
    description: 'Experience unforgettable adventures with our curated Nile excursions.',
  },
];

const MultiCardCarousel = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isMobile, setIsMobile] = useState(false); // Start with false, will be updated in useEffect
  const scrollRef = useRef(null);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 640);
    };

    window.addEventListener('resize', handleResize);

    // Clean up the event listener on component unmount
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const handleNext = () => {
    setCurrentIndex((prevIndex) => {
      const nextIndex = (prevIndex + (isMobile ? 1 : 3)) % cards.length;
      return nextIndex;
    });
  };

  const handlePrev = () => {
    setCurrentIndex((prevIndex) => {
      const prevIndexAdjusted = (prevIndex - (isMobile ? 1 : 3) + cards.length) % cards.length;
      return prevIndexAdjusted;
    });
  };

  // Determine the number of cards to display based on screen size
  const displayCards = isMobile ? [cards[currentIndex]] : cards.slice(currentIndex, currentIndex + 3);

  return (
    <div className="flex items-center justify-center py-16 lg:py-24 bg-transparent px-6 lg:px-8">
      <div className="w-full max-w-7xl ">
        <div className="text-left mx-auto max-w-7xl ">
          <h2 className="font-display text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
            Activities
          </h2>
          <p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr pb-6 sm:pb-8 lg:pb-12">
            Explore a diverse range of activities designed to elevate your Mind, Body, and Soul, fostering a deeper connection and holistic well-being.
          </p>
        </div>
        <div
          ref={scrollRef}
          className={clsx([
            'mt-8 flex gap-4 px-6 lg:px-8 mr-6 lg:mr-0',
            '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
            'snap-x snap-mandatory overflow-x-scroll overscroll-x-contain scroll-smooth',
            'pb-8',
          ])}
        >
          {cards.map((card, index) => (
            <div
              key={index}
              className="w-72 sm:w-80 lg:w-96 shrink-0 snap-start relative overflow-hidden rounded-lg h-80"
            >
              <img
                className="h-full w-full object-cover"
                src={card.image}
                alt={card.title}
              />
              <div className="absolute inset-x-0 bottom-0 bg-black bg-opacity-40 flex flex-col justify-end items-start text-left p-3 sm:p-4">
                <h3 className="text-base sm:text-lg font-semibold text-white mb-1 sm:mb-2">{card.title}</h3>
                <p className="text-sm sm:text-base text-white leading-tight">{card.description}</p>
              </div>
            </div>
          ))}
          <div className="w-8 shrink-0" />
        </div>
      </div>
    </div>
  );
};

export default MultiCardCarousel;