import Link from 'next/link'

import initialData from '../initial-data'
import { useTrainingsQuery } from '../src/gql'
import { Training } from '../src/training'

console.log(initialData)

const Home = () => {
  //const { data, error, loading } = useTrainingsQuery();

  return (
    <>
      <section>
        <h1>Stay in Shape with u-fit</h1>
        <p>u-fit is a high intensity interval training offered by u-blox.</p>
        <aside>
          <div className='info'>
            <span className='caption'>When</span>
            <span className='data'>Tuesdays, 11:45-12:30</span>
          </div>
          <div className='info'>
            <span className='caption'>Equipment</span>
            <span className='data'>Towel, water, optional: yoga mat</span>
          </div>
        </aside>
      </section>

      <section id='nextTraining'>
        <Training training={initialData.trainings[0]} />
      </section>

      <style jsx>
        {`
          .info .caption {
            display: inline-block;
            font-weight: 900;
            min-width: 6rem;
          }
        `}
      </style>
    </>
  )
}

export default Home