"use client";

import { Heart, Trash2 } from "lucide-react";

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;
  
  return (
    <div className="flex items-center gap-4 bg-white rounded-xl border p-3 mb-3 md:mb-4 transition">
      
      {/* Image */}
      <div className="relative w-20 h-20 flex-shrink-0 rounded-lg overflow-hidden">
        <img
          src={product.defaultImage}
          alt={product.name}
          className="object-cover"
        />
      </div>
      <div className="w-full">
        <h3 className="text-base md:text-lg font-semibold text-gray-800 line-clamp-2">
          {product.name}
        </h3>
        <p className="text-sm text-gray-500 mt-1">
          ₹{product.price.toLocaleString("en-IN")}
        </p>
      </div>
      {/* Actions */}
      <div className="flex items-center justify-between text-nowrap mt-0">
        {/* <button
          onClick={() => onMoveToCart?.(product._id)}
          className="text-sm px-3 py-1 rounded-md bg-black text-white hover:bg-gray-800 transition"
        >
          Move to Cart
        </button> */}

        <button
          onClick={() => onRemove?.(item._id)}
          className="w-10 h-10 inline-flex justify-center items-center rounded-full bg-red-500/25 hover:bg-red-500 text-red-500 hover:text-white transition duration-300"
        >
          <Trash2 size={18} />
        </button>
      </div>
 
    </div>
  );
}