import React, {Component} from 'react';

class BillingAddress extends Component {

    render() {
        const {billingAddress, openAddressDialog} = this.props;

        return (
            <div className="address-row">
                <div className="address-text">
                    <div className="small-address-title">
                        {billingAddress.firstName} {billingAddress.lastName}
                        {
                            billingAddress.invoiceMail &&
                            <span>( {billingAddress.invoiceMail} )</span>
                        }
                    </div>
                    <div>
                        {billingAddress.countryName}, {billingAddress.city}, {billingAddress.detailedAddress}, {billingAddress.zipCode}
                    </div>
                </div>
                <div className="address-icons">
                    <i className="fa fa-pencil control-icon edit-address-btn"
                        id="edit-address-btn"
                        onClick={()=> {openAddressDialog('edit', billingAddress)}}
                        aria-hidden="true"></i>
                    <i className="fa fa-trash control-icon remove-address-btn"
                        id="remove-address-btn"
                        onClick={()=> {openAddressDialog('remove', billingAddress)}}
                        aria-hidden="true"></i>
                </div>
            </div>
        );
    }
}

export default BillingAddress;
