import React from 'react';
import {diffString} from "../helpers/diff";

import "./Milestones.css";
import {colorByDiff} from "../helpers/color";

export const Milestones = ({milestones}) => (
  <table className="Milestone">
    <tbody>
      {milestones.map(milestone => <Milestone key={milestone.minutes} {...milestone} />)}
    </tbody>
  </table>
);

const Milestone = ({minutes, calories, diff, prevDiff}) => (
  <tr style={{color: colorByDiff(diff, prevDiff)}}>
    <td className="Milestone-minutes">&nbsp;{minutes}</td>
    <td className="Milestone-calories">&nbsp;{calories}</td>
    <td className="Milestone-diff">&nbsp;{minutes % 5 === 0 ? diffString(diff) : ""}</td>
  </tr>
);