import { formatTime, printExercises } from '../utils'
import { IExercise } from '../types'

export interface IExerciseComposition {
  exercises: IExercise[]
  duration: number
}

const ExerciseComposition = ({ exercises, duration }: IExerciseComposition) => {
  const exerciseString = printExercises(exercises)

  return (
    <div className='exercise-composition'>
      <span>{exerciseString}</span>
      <span className='exercise-time'>{formatTime(duration)}</span>

      <style jsx>
        {`
          .exercise-composition {
            display: grid;
            grid-template-columns: 5fr 1fr;
          }
          .exercise-composition .exercise-time {
            text-align: right;
          }
        `}
      </style>
    </div>
  )
}

export default ExerciseComposition