import ExerciseComposition from "./ExerciseComposition";
import { calculateDuration, formatTime } from "../utils";
import { IBlock } from "../types";

const TrainingBlock = ({ block }: { block: IBlock }) => {
  const duration = calculateDuration(block);
  return (
    <div>
      {block.title && (
        <h3>
          {block.title} ({formatTime(duration)})
        </h3>
      )}
      {block.blocks &&
        block.blocks.map(block => <TrainingBlock block={block} />)}
      {block.exercises && (
        <ExerciseComposition exercises={block.exercises} duration={duration} />
      )}

      <style jsx>
        {`
          section {
            display: grid;
          }
        `}
      </style>
    </div>
  );
};
export default TrainingBlock;
