import { QuickListButton } from 'bigblocks';

export default function ProductCard({ product }) {
  const handleListingSuccess = (listing: MarketListing) => {
    console.log('Product listed successfully!');
    console.log('Listing ID:', listing.id);
    console.log('Transaction:', listing.txid);
    
    // Navigate to listing page
    window.location.href = `/marketplace/listing/${listing.id}`;
  };

  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      
      <QuickListButton
        name={product.name}
        price={product.price * 100000000} // Convert to satoshis
        image={product.image}
        onSuccess={handleListingSuccess}
      />
    </div>
  );
}