import React from 'react';
import { PropTypes } from 'prop-types';

const Member = ({
  data: {
    firstName,
    lastName,
    identity,
    role,
  },
}) => (
  <div className="col-3">
    <img className="about-image rounded-circle" src={`img\${firstName}_${lastName}.png`} alt={`Bio of ${firstName} ${lastName}`} />
    <p className="text-center pt-3">
      <strong>
        {firstName} {lastName}
      </strong>
      <br />
      <span className="badge badge-pill badge-secondary about-team--identity">
        {identity}
      </span>
    </p>
    <p className="text-center">
      {role}
    </p>
  </div>
);

Member.propTypes = {
  data: PropTypes.shape({
    firstName: PropTypes.string.isRequired,
    lastName: PropTypes.string.isRequired,
    identity: PropTypes.string.isRequired,
    role: PropTypes.string.isRequired,
  }).isRequired,
};

export default Member;