text: import React from "react"
  import { Link } from "gatsby"
  import { GatsbyImage, getImage } from "gatsby-plugin-image"
  import slugify from "slugify"
  const RecipesList = ({ recipes = [] }) => {
    return (
      <div className="recipes-list">
        {recipes.map(recipe => {
          const { id, title, images, prepTime, cookTime } = recipe
          const pathToImage = getImage(images)
          const slug = slugify(title, { lower: true })
          return (
            <Link to={`/${slug}`} className="recipe">
              <GatsbyImage
                image={pathToImage}
                className="recipe-img"
                alt={title}
              />
              <h4>{title}</h4>
              <p>
                Prep : {prepTime}min | Cook : {cookTime}min
              </p>
            </Link>
          )
        })}
      </div>
    )
  }
  
  export default RecipesList
  