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

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

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

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