"use client";

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

type WishlistItem = {
  _id: string;
  product_id: {
    _id: string;
    name: string;
    slug: string;
    price: number;
    originalPrice: number;
    discount: number;
    defaultImage: string;
    isFeatured?: boolean;
    isActive?: boolean;
    wishlisted: 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="productbx">
          <div className="productbximg">
            <div className="discountbx">
              <span className="discounttxt">{product?.discount}% Off</span>
    
              <button
                className="wishlistbtn"
                aria-label="Wishlist"
                onClick={() => onRemove?.(item._id)}
              >
                <Trash2 size={14} className="text-red-500" />
              </button>
            </div>
    
            <a href={`/productdetails/${product?.slug}`}>
              <img src={product?.defaultImage} alt={product?.name} />
            </a>
          </div>
    
          <div className="productcontent">
            <div className="flex gap-2 justify-between mb-2">
              <h3>
                <a href={`/productdetails/${product?.slug}`}>
                  {product?.name}
                </a>
              </h3>                
            </div>
    
            <div className="flex gap-2 justify-between">
              {product?.originalPrice && product.originalPrice > product.price && <span className="crossprice">
                ₹{product?.originalPrice?.toLocaleString("en-IN")}.00
              </span>}
    
              <span className="price">
                ₹{product?.price?.toLocaleString("en-IN")}.00
              </span>
            </div>
          </div>
        </div>
  );
}