import React from 'react';
import { Glyphicon, Panel } from 'react-bootstrap';
import styles from './AddressPanel.module.css';

function AddressPanel(props) {
  const { address, header, bsStyle } = props;

  return (
    <Panel bsStyle={bsStyle}>
      {header && <Panel.Heading>{header}</Panel.Heading>}
      <Panel.Body>
        {address ? (
          <>
            <div className={styles.row}>
              <Glyphicon className={styles.glyph} glyph="user" />
              {address.name} {address.surname}
            </div>
            <div className={styles.row}>
              <Glyphicon className={styles.glyph} glyph="phone-alt" />
              {address.phoneNumber}
            </div>
            <div className={styles.row}>
              <Glyphicon className={styles.glyph} glyph="envelope" />
              {address.email}
            </div>
            <div className={styles.row}>
              <Glyphicon className={styles.glyph} glyph="home" />
              <div>
                {address.companyName}
                {address.address && (
                  <>
                    <br />
                    {address.address}
                  </>
                )}
                {address.region && (
                  <>
                    <br />
                    {address.region}
                  </>
                )}
                {(address.postalCode || address.city) && (
                  <>
                    <br />
                    {address.postalCode} {address.city}
                  </>
                )}
                {address.country && (
                  <>
                    <br />
                    {address.country}
                  </>
                )}
              </div>
            </div>
          </>
        ) : (
          <div className={styles.row}>No address</div>
        )}
      </Panel.Body>
    </Panel>
  );
}

export default AddressPanel;
