text: import { BsClockHistory, BsClock, BsPeople } from 'react-icons/bs'
  import { GatsbyImage, getImage } from 'gatsby-plugin-image'
  import { graphql, Link } from 'gatsby'
  import Layout from '../components/Layout'
  import React from 'react'
  import SiteSeo from '../components/SiteSeo'
  import slugify from 'slugify'
  
  /* Boilerplate code to programmatically produce a template for all recipe pages */
  const RecipeTemplate = ({ data }) => {
    const {
      title,
      cookTime,
      content,
      prepTime,
      servings,
      description: { description },
      image
    } = data.contentfulRecipe
    const pathToImage = getImage(image)
    const { tags, instructions, ingredients, tools } = content
    return (
      <Layout>
        <SiteSeo title={title} description={description} />
        <main className="page">
          <div className="recipe-page">
            <section className="recipe-hero">
              <GatsbyImage
                image={pathToImage}
                alt={title}
                className="about-img"
              />
              <article className="recipe-info">
                <h2>{title}</h2>
                <p>{description}</p>
  
                <div className="recipe-icons">
                  <article>
                    <BsClock />
                    <h5>prep time</h5>
                    <p>{prepTime} min.</p>
                  </article>
                  <article>
                    <BsClockHistory />
                    <h5>cook time</h5>
                    <p>{cookTime} min.</p>
                  </article>
                  <article>
                    <BsPeople />
                    <h5>serving</h5>
                    <p>{servings} </p>
                  </article>
                </div>
  
                <p className="recipe-tags">
                  Tags :
                  {tags.sort().map((tag, index) => {
                    const slug = slugify(tag, { lower: true })
  
                    return (
                      <Link to={`/tags/${slug}`} key={index}>
                        {tag}
                      </Link>
                    )
                  })}
                </p>
              </article>
            </section>
  
            <section className="recipe-content">
              <article>
                <h4>instructions</h4>
                {instructions.map((item, index) => {
                  return (
                    <div key={index} className="single-instruction">
                      <header>
                        <p>step {index + 1}</p>
                        <div />
                      </header>
                      <p>{item}</p>
                    </div>
                  )
                })}
              </article>
              <article className="second-column">
                <div>
                  <h4>ingredients</h4>
                  {ingredients.map((item, index) => {
                    return (
                      <p key={index} className="single-ingredient">
                        {item
                          .toLowerCase()
                          .split(' ')
                          .map(s => s.charAt(0).toUpperCase() + s.substring(1))
                          .join(' ')}
                      </p>
                    )
                  })}
                </div>
                <div>
                  <h4>tools</h4>
                  {tools.sort().map((item, index) => {
                    return (
                      <p key={index} className="single-tool">
                        {item}
                      </p>
                    )
                  })}
                </div>
              </article>
            </section>
          </div>
        </main>
      </Layout>
    )
  }
  
  export const query = graphql`
    query getSingleRecipe($title: String) {
      contentfulRecipe(title: { eq: $title }) {
        title
        cookTime
        content {
          ingredients
          instructions
          tags
          tools
        }
        description {
          description
        }
        prepTime
        servings
        image {
          gatsbyImageData(layout: CONSTRAINED, placeholder: TRACED_SVG)
        }
      }
    }
  `
  
  export default RecipeTemplate
  