import Link from 'next/link'

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

const Home = () => {
  const { data, error, loading } = usePublishedTrainingsQuery()

  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'>
        {loading && <p>Loading trainings...</p>}
        {error && <p>Error loading trainings: {error.message}</p>}
        {data?.publishedTrainings && data.publishedTrainings.length > 0 ? (
          <Training training={data.publishedTrainings[0]} />
        ) : (
          <p>No trainings found.</p>
        )}
      </section>

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

export default Home