import React, { PropTypes } from 'react';

const Advisor = ({ AdvisorName, AdvisorRole, AdvisorEmail }) =>
  <div style={{ paddingTop: '20px' }} className="row">
    <div className="small-12 medium-12 large-12 columns bold">Academic Advisor:</div>
    <div className="small-12 medium-12 large-12 columns">
      {AdvisorName}
    </div>
    <div className="small-12 medium-12 large-12 columns">
      {AdvisorRole}
    </div>
    <div className="small-12 medium-12 large-12 columns">
      <a href={`mailto:${AdvisorEmail}`} target="_blank" rel="noopener noreferrer">
        {AdvisorEmail}
      </a>
    </div>
  </div>;

const Advisors = ({ advisors }) =>
  advisors && advisors.length > 0 && advisors[0].AdvisorName !== ''
    ? <div>
      {[...advisors].map((advisor, key) => <Advisor {...advisor} key={key} />)}
    </div>
    : <div style={{ paddingTop: 10 }}>No Advisor(s) Found</div>;

Advisor.propTypes = {
  AdvisorName: PropTypes.string,
  AdvisorRole: PropTypes.string,
  AdvisorEmail: PropTypes.string,
};

export default Advisors;