import theme from "../../styles/theme";

import TrainingBlock from "./TrainingBlock";
import Link from "next/link";
import { ITraining } from "../types";
import TrainingMeta from "./TrainingMeta";

const Training = ({ training }: { training: ITraining }) => {
  return (
    <article>
      <h2>{training.title}</h2>

      <TrainingMeta training={training} />

      <section>
        <h2>Program</h2>
        <Link href="/timer">
          <button>Start Timer</button>
        </Link>
        {training.blocks &&
          training.blocks
            .sort(block => block.sequence || 0)
            .map(block => <TrainingBlock key={block.id} block={block} />)}
      </section>

      <style jsx>
        {`
          article {
            display: grid;
            grid-template-areas:
              "title title"
              "information placeholder"
              "content content";
            grid-template-columns: 1fr 2fr;
            background-image: url("media/man_working_out.jpg");
            background-size: auto 400px;
            background-repeat: no-repeat;
            margin: 2em 0;
          }

          article > * {
            padding: 0.2em 1em;
            margin: 0;
          }

          article > h2 {
            grid-area: title;
            font-weight: 900;
            font-size: 120%;
            background: ${theme.colors.darkerblue};
            color: ${theme.colors.offWhite};
          }

          section {
            grid-area: content;
            padding: 1em 2em;
          }

          span.caption {
          }

          button {
            border: none;
            background: ${theme.colors.darkblue};
            color: ${theme.colors.offWhite};
            font-weight: 900;
            padding: 0.5rem;
            cursor: pointer;
          }
        `}
      </style>
    </article>
  );
};

export default Training;