"use client";

import React, { useState } from "react";
import BoldIcon from "@/components/ui/BoldIcon";

interface ProductGalleryProps {
  images: string[];
}

export default function ImageCarousel({ images }: ProductGalleryProps) {
  const [selectedImage, setSelectedImage] = useState(images[0]);
  const [liked, setLiked] = useState(false);

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="relative border rounded-md">
        <img
          src={selectedImage}
          alt="Selected"
          className="w-[650px] h-[600px] max-xl:h-[500px] max-xl:w-[450px] max-lg:h-[400px] max-lg:w-[350px] max-sm:h-[300px] max-sm:w-[300px] object-cover rounded-lg shadow-lg"
        />
        <div className="md:hidden absolute top-2 right-2 flex flex-col gap-2">
          <button
            onClick={() => setLiked(!liked)}
            className={`p-2 rounded-full shadow-lg ${
              liked ? "bg-red-500 text-white" : "bg-white text-gray-800"
            }`}
          >
            <BoldIcon name="heart" size={20} tinted className={liked ? "text-white" : "text-gray-800"} />
          </button>
          <button
            onClick={() => navigator.share?.({ title: "Check this out", url: window.location.href })}
            className="p-2 rounded-full bg-white text-gray-800 shadow-lg"
          >
            <BoldIcon name="share" size={20} tinted className="text-gray-800" />
          </button>
        </div>
      </div>

      <div className="flex gap-2 overflow-x-auto no-scrollbar">
        {images.map((img, idx) => (
          <img
            key={idx}
            src={img}
            alt={`Thumb ${idx}`}
            className={`w-20 h-20 object-cover rounded-lg cursor-pointer border-2 ${
              selectedImage === img ? "border-blue-500" : "border-transparent"
            }`}
            onClick={() => setSelectedImage(img)}
          />
        ))}
      </div>
    </div>
  );
}
