import { QuickBuyButton } from 'bigblocks';

export default function ListingCard({ listing }) {
  const handlePurchaseSuccess = (transaction: Transaction) => {
    console.log('Purchase successful!');
    console.log('Transaction ID:', transaction.txid);
    console.log('Listing purchased:', transaction.listingId);
    
    // Navigate to success page
    window.location.href = `/purchases/${transaction.txid}`;
  };

  const handlePurchaseError = (error: MarketError) => {
    console.error('Purchase failed:', error);
    
    if (error.code === 'INSUFFICIENT_FUNDS') {
      alert(`Need ${error.details?.required} satoshis, but only have ${error.details?.available}`);
    } else {
      alert(error.message);
    }
  };

  return (
    <div className="listing-card">
      <h3>{listing.title}</h3>
      <p className="price">{listing.price} sats</p>
      
      <QuickBuyButton
        listingId={listing.id}
        price={listing.price}
        onSuccess={handlePurchaseSuccess}
        onError={handlePurchaseError}
      />
    </div>
  );
}