import { FunctionComponent } from 'react'
import { TTraining } from '../types'
import Link from 'next/link'
import TrainingBlock from './TrainingBlock'
import theme from '../../styles/theme'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStopwatch20 } from '@fortawesome/free-solid-svg-icons'

const TrainingProgram: FunctionComponent<{ training: TTraining }> = ({ training }) => {
  return (
    <section className='training-program'>
      <Link href='/timer/[id]' as={`/timer/${training.id}`}>
        <button type='button'>
          <span>
            Start <FontAwesomeIcon icon={faStopwatch20} height='1.2em' /> now!{' '}
          </span>
        </button>
      </Link>
      {training.blocks &&
        training.blocks
          .slice()
          .sort((a, b) => a.order - b.order)
          .map((block) => <TrainingBlock key={block.id} blockInstance={block} />)}

      <style jsx>{`
        section {
          max-width: 460px;
        }
        button {
          display: flex;
          padding: 1em 2em;
          margin: 0.8em auto;
          border: none;
          font-size: 140%;
          text-transform: uppercase;
          cursor: pointer;
        }
        button span {
          margin-right: 0.5em;
        }
      `}</style>
    </section>
  )
}

export default TrainingProgram
