import Training from '../components/training'
import data from '../initial-data.js'
import theme from '../styles/theme'

console.log(data)

const Home = () => (
  <>
    <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 id='trainingTime'>
          <span className='caption'>When</span>
          <span className='data'>Tuesdays, 11:45-12:30</span>
        </div>
        <div id='trainingEquipment'>
          <span className='caption'>Equipment</span>
          <span className='data'>Towel, water, optional: yoga mat</span>
        </div>
      </aside>
    </section>

    <section id='nextTraining'>
      <Training {
        ... {
          ...data.trainings[data.trainings.length - 1],
          title: `Your Next Training: ${data.trainings[data.trainings.length - 1].title}`,
        }
      } />
    </section>
  </>
)

export default Home