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

import React, { useState, useEffect, useRef } from 'react';
import clsx from 'clsx';
import { H2, P, PS, PXS, H3 , H4   } from '@/components/text';

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="bg-bg-sand flex items-center justify-center py-16 lg:py-24 px-6">
      <div className="w-full max-w-7xl ">
        <div className="text-left mx-auto max-w-7xl ">
          <H2 className="">
            Activities
          </H2>
          <P className="max-w-5xl mb-12">
            Explore a diverse range of activities designed to elevate your Mind, Body, and Soul.
          </P>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
          {cards.slice(0, 3).map((card, index) => (
            <div
              key={index}
              className="relative overflow-hidden bg-transparent"
            >
              <div className="aspect-[4/5] overflow-hidden">
                <img
                  className="h-full w-full object-cover"
                  src={card.image}
                  alt={card.title}
                />
              </div>
              <div className="py-2">
                <H4 className="mb-1">{card.title}</H4>
                <PXS className="">{card.description}</PXS>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default MultiCardCarousel;
