import React, { Fragment } from 'react';

import TextDisplay from './TextDisplay';

const contact = contactpoints => contactpoints.map((contactpoint) => {
  let toBeDisplayed = null;
  if (contactpoint.system === 'phone') {
    toBeDisplayed = <TextDisplay title="Phone number" value={contactpoint.value} />;
  }
  if (contactpoint.system === 'email') {
    toBeDisplayed = <TextDisplay title="Email" value={contactpoint.value} />;
  }
  return toBeDisplayed;
});

const ContactInformation = ({
  contactInfo
}) => (
  <Fragment>
    {contact(contactInfo)}
  </Fragment>
);

export default ContactInformation;