"use client";

import { Heart, Trash2 } from "lucide-react";
import { useRouter } from "next/navigation";

type WishlistItem = {
  _id: string;
  product_id: {
    _id: string;
    name: string;
    slug: string;
    price: number;
    defaultImage: string;
    isFeatured?: boolean;
    isActive?: boolean;
  };
};

export default function WishlistCard({
  item,
  onRemove,
  onMoveToCart,
}: {
  item: WishlistItem;
  onRemove?: (id: string) => void;
  onMoveToCart?: (productId: string) => void;
}) {
  const product = item.product_id;
  const router = useRouter()

  const handleNavigate = () => {    
    router.push(`/productdetails/${product?.slug}`)
  }

  return (
  <div className="group bg-white rounded-3xl overflow-hidden border border-gray-100 hover:border-rose-200 hover:shadow-xl transition-all duration-300">

    {/* Product Image */}
    <div className="relative aspect-square overflow-hidden bg-gray-100">
      <img
        src={product.defaultImage}
        alt={product.name}
        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
      />

      {/* Wishlist Badge */}
      {/* <div className="absolute top-3 right-3">
        <div className="bg-white/90 backdrop-blur-sm rounded-full p-2 shadow">
          <Heart
            size={16}
            className="fill-rose-500 text-rose-500"
          />
        </div>
      </div> */}

      {/* Remove Button */}
      <button
        onClick={() => onRemove?.(item._id)}
        className="absolute top-3 left-3 bg-white/90 backdrop-blur-sm rounded-full p-2 shadow hover:bg-red-50 transition"
      >
        <Trash2
          size={16}
          className="text-red-500"
        />
      </button>
    </div>

    {/* Content */}
    <div className="p-4">

      <h3 className="font-semibold text-gray-900 line-clamp-2 min-h-[52px]">
        {product.name}
      </h3>

      <div className="mt-3">
        <span className="text-2xl font-bold text-gray-900">
          ₹{product.price.toLocaleString("en-IN")}
        </span>
      </div>

      <div className="mt-4 flex items-center justify-between">
        <span className="text-xs font-medium px-2 py-1 rounded-full bg-green-50 text-green-600">
          In Wishlist
        </span>

        <button
          className="text-sm font-medium text-rose-600 hover:text-rose-700"
          onClick={handleNavigate}
        >
          View Product →
        </button>
      </div>
    </div>
  </div>
);;
}