"use client";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { SliderCard, SliderCardContent } from "@/components/ui/sliderCard";
import Image from "next/image";
import Lottie from 'react-lottie-player';
import { useState, useEffect } from 'react';

import Button1 from "./card/button/button";
import { useLanguage } from "@/context/LanguageContext";
import { useRouter } from 'next/navigation'; 

export default function EbookSlider({ items }) {
  const [animationData, setAnimationData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setIsLoading(false), 3000); 
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
  fetch('/animations/indicatore.json')
    .then((res) => res.json())
    .then(setAnimationData);
}, []);
  const { language, t } = useLanguage();
  const router = useRouter(); 

  const handleViewDetails = (slug) => {
    router.push(`/Services/${slug}`);
  };

  return (
    <section className="py-4 mx-auto w-[100%] md:px-0 md:ml-[-1.5rem] md:w-[100%]">
      <div className="mx-auto md:w-[100%]">
        <Carousel>
          <CarouselContent>
            {items.map((item) => (
              <CarouselItem key={item.id} className="md:basis-1/2 lg:basis-1/3">
                {isLoading ? (
 <div className="relative bg-white dark:bg-[#131313] border border-[#18181824] dark:border-[#333333] rounded-[14px] md:rounded-[45px] h-[400px] flex items-center justify-center">
    <div className="skeleton w-[90%] h-[90%] rounded-xl"></div>
  </div>

                ) : (
    <SliderCard className="dark:border-[#333333] relative bg-white overflow-hidden border-[#18181824] dark:bg-[#131313]">
                  <SliderCardContent className="flex aspect-square items-center justify-center">
                    <div className="absolute w-[100px] h-[130%] bg-gradient-to-b from-[#1F998E] to-[#B4D485] animate-spin-slow"></div>
                    <div className="absolute inset-[5px] bg-[#ffffff] dark:bg-[#131313] rounded-xl"></div>
                    <div className="flex flex-col relative px-4 py-4 items-center">
                      <h3 className="flex-1 mb-4 uppercase font-bold">
                        {item.title}
                      </h3>
                      <div className="border-[1px] flex dark:border-[#333333] rounded-md justify-center w-full h-[300px] p-3 items-center">
                        <Image
                          className="w-full h-full rounded-md object-cover"
                          height={400}
                          width={400}
                          alt={item.title}
                          src={item.imgSrc}
                          loading="lazy"
                        />
                      </div>
                      <div className="mt-6 flex flex-col gap-1">
                        <p className={`text-xs mb-3 h-14 dark:text-[#ABABAB] ${language === "en" ? "text-left" : "text-right"}`}>
                          {item.description}
                        </p>
                        <Button1
                          text={t("View Details")}
                          onClick={() => handleViewDetails(item.slug)} 
                        />
                      </div>
                    </div>
                  </SliderCardContent>
                </SliderCard>
                )

                }
            
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious className="absolute left-[-16px] top-1/2 -translate-y-1/2 dark:border-[#333333]" />
          <CarouselNext className="absolute right-[-16px] top-1/2 -translate-y-1/2 dark:border-[#333333]" />
        </Carousel>
      </div>
    </section>
  );
}