import React from "react";

// re-arrange to make invoice detail a self-contained element
const Invoice = ( {invoiceDetails} ) => {
    let addressInfo = invoiceDetails.purchase_units[0].shipping.address;
    let address = `${addressInfo.address_line_1} ${addressInfo.admin_area_2}, ${addressInfo.admin_area_1} ${addressInfo.postal_code}`;

    return (
        <div className="container">
            Date Purchased: {invoiceDetails.create_time}
            <br />
            Item: {invoiceDetails.purchase_units[0].description}
            <br />
            Amount Paid: ${invoiceDetails.purchase_units[0].amount.value}
            <br />
            Ship to: {invoiceDetails.purchase_units[0].shipping.name.full_name}
            <br />
            {/* Shipping address: {streetAddr} {city}, {state} {postalCode} */}
            Shpping address: {address}
        </div>
    );
}

export default Invoice;