text: import FaArrowRight from "react-icons/lib/fa/arrow-right";
  import FaCalendar from "react-icons/lib/fa/calendar";
  import FaTag from "react-icons/lib/fa/tag";
  import FaUser from "react-icons/lib/fa/user";
  import Link from "gatsby-link";
  import PropTypes from "prop-types";
  import React from "react";
  
  const Item = props => {
    const {
      theme,
      post: {
        excerpt,
        fields: { slug, date, author },
        frontmatter: { title, category }
      }
    } = props;
  
    return (
      <React.Fragment>
        <li>
          <Link to={slug} key={slug} className="link">
            <div className="gatsby-image-outer-wrapper">
              <div className="gatsby-image-wrapper">
                <div style={{ width: "100%", paddingBottom: "45%" }} />
                <picture>
                  <source type="image/webp" sizes="(max-width: 800px) 100vw, 800px" />
                  <img className="test-img" />
                  <img className="hero-image" src={`/assets/${date}.jpeg`} />
                </picture>
              </div>
            </div>
            <h1>
              {title} <FaArrowRight className="arrow" />
            </h1>
            <p className="meta">
              <span>
                <FaCalendar size={18} /> {date}
              </span>
              <span>
                <FaUser size={18} /> {author}
              </span>
              {category && (
                <span>
                  <FaTag size={18} /> {category}
                </span>
              )}
            </p>
            <p>{excerpt}</p>
          </Link>
        </li>
  
        {/* --- STYLES --- */}
        <style jsx>{`
          :global(.link) {
            width: 100%;
            color: ${theme.text.color.primary};
          }
  
          li {
            border: 1px solid transparent;
            border-radius: ${theme.size.radius.default};
            margin: ${`calc(${theme.space.default} * 2) 0 calc(${theme.space.default} * 3)`};
            padding: ${theme.space.inset.s};
            position: relative;
            transition: all ${theme.time.duration.default};
            background: transparent;
            border: 1px solid ${theme.line.color};
            box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
  
            &:after {
              bottom: ${`calc(${theme.space.default} * -2.5)`};
            }
            :global(.gatsby-image-wrapper) {
              transform: scale(1);
            }
            h1 {
              color: ${theme.blog.h1.hoverColor};
            }
            :global(.arrow) {
              opacity: 1;
            }
  
            .hero-image {
              position: absolute;
              top: 0px;
              left: 0px;
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center center;
              opacity: 1;
              transition: opacity 0.5s ease 0s;
            }
  
            .test-img {
              position: absolute;
              top: 0px;
              left: 0px;
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center center;
              opacity: 0;
              transition: opacity 0.5s ease 0.5s;
            }
  
            :global(.gatsby-image-outer-wrapper) {
              border-radius: ${theme.size.radius.default};
              border: 1px solid ${theme.line.color};
              overflow: hidden;
            }
            :global(.gatsby-image-outer-wrapper img) {
              z-index: -1;
            }
  
            &::after {
              border-top: 1px solid ${theme.line.color};
              content: "";
              height: 0;
              position: absolute;
              bottom: ${`calc(${theme.space.default} * -1.5)`};
              left: 50%;
              transform: translateX(-50%);
              transition: all ${theme.time.duration.default};
              width: 50%;
            }
  
            &:first-child {
              &::before {
                border-top: 1px solid ${theme.line.color};
                content: "";
                height: 0;
                position: absolute;
                top: ${`calc(${theme.space.default} * -1.5)`};
                left: 50%;
                transform: translateX(-50%);
                transition: all ${theme.time.duration.default};
                width: 50%;
              }
            }
          }
  
          h1 {
            padding: ${theme.space.m} ${theme.space.s} 0;
            line-height: ${theme.blog.h1.lineHeight};
            font-size: ${theme.blog.h1.size};
            text-remove-gap: both;
  
            :global(.arrow) {
              display: none;
            }
          }
  
          .meta {
            display: flex;
            flex-flow: row wrap;
            font-size: 0.8em;
            padding: ${theme.space.m} ${theme.space.s};
            background: transparent;
  
            :global(svg) {
              fill: ${theme.icon.color};
              margin: ${theme.space.inline.xs};
            }
            span {
              align-items: center;
              display: flex;
              text-transform: uppercase;
              margin: ${theme.space.xs} ${theme.space.s} ${theme.space.xs} 0;
            }
          }
  
          p {
            line-height: 1.5;
            padding: 0 ${theme.space.s};
            text-remove-gap: both;
          }
  
          @from-width tablet {
            li {
              margin: ${`calc(${theme.space.default} * 3) 0 calc(${theme.space.default} * 4)`};
              padding: ${theme.space.default};
  
              &::after {
                bottom: ${`calc(${theme.space.default} * -2)`};
              }
  
              &:first-child {
                &::before {
                  top: ${`calc(${theme.space.default} * -1.75)`};
                }
              }
            }
  
            h1 {
              font-size: ${`calc(${theme.blog.h1.size} * 1.2)`};
              padding: ${`calc(${theme.space.default} * 1.5) ${theme.space.default} 0`};
              transition: all 0.5s;
            }
            .meta {
              padding: ${`calc(${theme.space.m} * 1.5) ${theme.space.m}`};
            }
            p {
              padding: 0 ${theme.space.default};
            }
          }
          @from-width desktop {
            li {
              margin: ${`calc(${theme.space.default} * 4) 0 calc(${theme.space.default} * 5)`};
              padding: 0 0 ${`calc(${theme.space.default} * 2)`};
  
              &::after {
                bottom: ${`calc(${theme.space.default} * -1.5)`};
              }
  
              &:first-child {
                &::before {
                  top: ${`calc(${theme.space.default} * -2.75)`};
                }
              }
            }
  
            :global(.blogItemLink:first-child) > li::before {
              top: ${`calc(${theme.space.default} * -2.75)`};
            }
            h1 {
              font-size: 2.5em;
              padding: ${`calc(${theme.space.default} * 1.2) calc(${theme.space.default} * 2) 0`};
            }
            .meta {
              padding: ${`calc(${theme.space.default} * 1.5) calc(${theme.space.default} * 2)
                calc(${theme.space.default} * 0.5)`};
            }
            p {
              padding: ${`0 calc(${theme.space.default} * 2)`};
            }
            li {
              border: 1px solid ${theme.line.color};
              box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
  
              &:after {
                bottom: ${`calc(${theme.space.default} * -2.5)`};
              }
              :global(.gatsby-image-wrapper) {
                transform: scale(1);
              }
              h1 {
                color: ${theme.blog.h1.hoverColor};
              }
              :global(.arrow) {
                opacity: 1;
              }
  
              &:hover {
                border: 1px solid ${theme.line.color};
                box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
  
                &:after {
                  bottom: ${`calc(${theme.space.default} * -2.5)`};
                }
                :global(.gatsby-image-wrapper) {
                  transform: scale(1.1);
                }
                h1 {
                  color: ${theme.blog.h1.hoverColor};
                }
                :global(.arrow) {
                  opacity: 1;
                  transform: translateX(0);
                }
              }
              :global(.gatsby-image-wrapper) {
                transition: all ${theme.time.duration.default};
              }
              :global(.arrow) {
                display: inline-block;
                fill: ${theme.color.special.attention};
                opacity: 0;
                transition: all 0.5s;
                transform: translateX(-50%);
              }
            }
          }
        `}</style>
      </React.Fragment>
    );
  };
  
  Item.propTypes = {
    post: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired
  };
  
  export default Item;
  