const ExerciseList = props => (
  <div>
    <h2>
      {props.exercises.map(exercise => (
        <ExerciseHint key={exercise.id} exercise={exercise} />
      ))}
    </h2>
  </div>
);

const ExerciseHint = props => (
  <div>
    <h3>{props.exercise.name}</h3>
    <p>{props.exercise.description}</p>
  </div>
);

const Exercise = props => (
  <div>
    <h3>{props.exercise.name}</h3>
    <p>{props.exercise.description}</p>
    <p>{props.exercise.video}</p>
  </div>
);

export { ExerciseList };
export default Exercise;