import Track from './track'
import Exercise from './exercise'

const TrainingBlock = props => (
  <li>
    <h2>{props.title}</h2>
    <p>
      <span className='caption'>Duration: </span>
      <span className='data'>{props.duration}</span>
    </p>
    <p>
      <span className='caption'>Variation: </span>
      <span className='data'>{props.variation}</span>
    </p>
    <p>
      <span className='caption'>Description: </span>
      <span className='data'>{props.description}</span>
    </p>
    <p>
      <span className='caption'>Format: </span>
      <span className='data'>
        {props.format.name}{' '}
        <sup>
          <a title={props.format.description}>[?]</a>
        </sup>
      </span>
    </p>
    <section>
      <h2>Tracks</h2>
      <ol>
        {props.tracks.map(track => (
          <Track key={track.id} {...track} />
        ))}
      </ol>
    </section>
    <section>
      <h2>Exercises</h2>
      <ol>
        {props.exercises.map(exercise => (
          <Exercise key={exercise.id} {...exercise} />
        ))}
      </ol>
    </section>

    <style jsx>
      {`
          section {
            display: grid;
          }
        `}
    </style>
  </li>
)

export default TrainingBlock