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

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

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

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

      <style jsx>
        {`
          }
          .exercise-composition {
            display: flex;
            justify-content: space-between;
            align-items: end;
          }
          .exercise-composition .exercise-time {
            right: 0;
            color: gray;
            font-size: 80%;
          }
        `}
      </style>
    </div>
  )
}

export default ExerciseComposition
