import React, { useContext } from "react";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import Link from "next/link";
import Image from "next/image";

const CategorySlider = ({ categoryData, products }) => {
  return (
    <div className="w-full sm:w-[70%] p-4">
      <h2 className="capitalize font-serif text-2xl sm:text-4xl font-bold mb-4 sm:mb-7">
        Top Selling {categoryData?.category_name}
      </h2>
      <Carousel className="w-full max-w-full sm:max-w-[90%]">
        <CarouselContent className="-ml-1">
          {products?.slice(0, 3).map((product, index) => (
            <CarouselItem
              key={index}
              className="pl-3 sm:basis-1/2 lg:basis-1/3"
            >
              <Link href={`/products/${product.product_name}`}>
                <div className="p-1">
                  <div className="bg-white shadow-md hover:shadow-xl">
                    <div className="flex aspect-square items-center justify-center p-8">
                      <Image
                        src={product.images[0]?.image || "/placeholder.jpg"} 
                        alt={product.product_name}
                        className="hover:scale-105 object-cover object-center transition-all ease-in duration-300" // Tailwind styling
                      />
                    </div>
                  </div>
                  <h2 className="mt-3 text-center text-lg sm:text-xl font-medium">
                    {product.product_name}
                  </h2>
                </div>
              </Link>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious className="text-black hidden sm:flex" />
        <CarouselNext className="text-black hover:bg-[#C19A5B] hidden sm:flex" />
      </Carousel>
    </div>
  );
};

export default CategorySlider;