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>
      {props.type ? (
        <>
          <span className='caption'>Type: </span>
          <span className='data'>
            {props.type.name}
            <sup>
              <a title={props.type.description}>[?]</a>
            </sup>
          </span>
        </>
      ) : null}
    </p>
    <section>
      <h2>Tracks</h2>
      {props.tracks ? (
        <ol>
          {props.tracks.map(track => (
            <Track key={track.id} {...track} />
          ))}
        </ol>
      ) : null}
    </section>
    <section>
      <h2>Exercises</h2>
      {props.exercises ? (
        <ol>
          {props.exercises.map(exercise => (
            <Exercise key={exercise.id} {...exercise} />
          ))}
        </ol>
      ) : null}
    </section>

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

export default TrainingBlock