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;