"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 gap-4 bg-white rounded-xl shadow-sm border p-3 hover:shadow-md transition">
      
      {/* Image */}
      <div className="relative w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-gray-100">
        <img
          src={product.defaultImage}
          alt={product.name}
          className="object-cover"
        />
      </div>

      {/* Details */}
      <div className="flex-1 flex flex-col justify-between">
        
        <div>
          <h3 className="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 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="text-red-500 hover:text-red-700"
          >
            <Trash2 size={18} />
          </button>
        </div>
      </div>
    </div>
  );
}