"use client";
import React, { useContext, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { ChevronLeft, ChevronRight } from "lucide-react";
import ProductContext from "@/app/contexts/productContext";
import { backendUrl } from "@/utils/axios";
import Image from "next/image";

const ProductGallery = ({ productId }) => {
  const { products } = useContext(ProductContext);

  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const nextImage = () => {
    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % productImages.length);
  };

  const prevImage = () => {
    setCurrentImageIndex(
      (prevIndex) =>
        (prevIndex - 1 + productImages.length) % productImages.length
    );
  };
  const product = products?.find((pr) => pr.id == productId);
  if (!product) {
    return null;
  }
  const productImages = product?.images?.map((img) => img.image) || [];

  return (
    <div className="flex flex-col md:flex-row gap-4 p-4 sm:w-[70%] ">
      <div className="hidden md:flex flex-col gap-2">
        {productImages?.map((src, index) => (
          <Image
            key={index}
            src={`${backendUrl}${src}`}
            alt={`Thumbnail ${index + 1}`}
            width={160} // Width of w-40 (160px)
            height={128} // Height of h-32 (128px)
            className="object-cover cursor-pointer border border-gray-300 hover:border-blue-500"
            onClick={() => setCurrentImageIndex(index)}
          />
        ))}
      </div>
      <div className="flex-grow h-full">
        <Card className="p-4  h-[380px] sm:h-[80vh]">
          {/* Main image with carousel controls */}
          <div className="relative mb-4 h-full">
            <Image
              src={`${backendUrl}${productImages[currentImageIndex]}`}
              alt="Main product"
              width={500} 
              height={500} 
              className="object-cover w-full h-full"
            />
            <Button
              className="absolute top-1/2 left-2 transform -translate-y-1/2 md:hidden"
              onClick={prevImage}
              variant="ghost"
            >
              <ChevronLeft />
            </Button>
            <Button
              className="absolute top-1/2 right-2 transform -translate-y-1/2 md:hidden"
              onClick={nextImage}
              variant="ghost"
            >
              <ChevronRight />
            </Button>
          </div>
        </Card>
        <div className="my-6">
          <div className="flex gap-3">
            <h3 className="p-1 px-2 rounded-3xl border text-xs border-yellow-700">
              A+ Grade
            </h3>
            <h3 className="p-1 px-2 rounded-3xl border text-xs border-yellow-700">
              IRL Certified
            </h3>
            <h3 className="p-1 px-2 rounded-3xl border text-xs border-yellow-700">
              Expert Rating
            </h3>
          </div>
          <h2 className="mt-3">Note: Free Shipping on order above $ 300</h2>
          <h2 className="my-1">100% Secured Payment</h2>
          <h2>Authenticity Guaranteed</h2>
        </div>
      </div>
    </div>
  );
};

export default ProductGallery;