text: import React from "react"
  import Image from "gatsby-image"
  import styles from "../../css/tour.module.css"
  import { FaMap } from "react-icons/fa"
  import AniLink from "gatsby-plugin-transition-link/AniLink"
  import PropTypes from "prop-types"
  
  const Tour = ({ tour }) => {
    const { name, price, country, days, slug, images } = tour
  
    let mainImage = images[0].fluid
  
    return (
      <article className={styles.tour}>
        <div className={styles.imgContainer}>
          <Image fluid={mainImage} className={styles.img} alt="single tour" />
          <AniLink fade className={styles.link} to={`/tours/${slug}`}>
            details
          </AniLink>
        </div>
        <div className={styles.footer}>
          <h3>{name}</h3>
          <div className={styles.info}>
            <h4 className={styles.country}>
              <FaMap className={styles.icon}></FaMap>
              {country || "default country"}
            </h4>
            <div className={styles.details}>
              <h6>{days} days</h6>
              <h6>from {price} dollars</h6>
            </div>
          </div>
        </div>
      </article>
    )
  }
  
  Tour.propTypes = {
    tour: PropTypes.shape({
      name: PropTypes.string.isRequired,
      country: PropTypes.string.isRequired,
      price: PropTypes.number.isRequired,
      days: PropTypes.number.isRequired,
      images: PropTypes.arrayOf(PropTypes.object).isRequired,
    }),
  }
  
  export default Tour
  