import React from 'react'
import Link from 'gatsby-link'
import Img from 'gatsby-image'

import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'

const Card = ({ ...props }) => (
  <article className="my-4 lg:my-2 lg:mx-2 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
    <Link to={props.url}>
      {props.image ? (
        <Img resolutions={props.image} />
      ) : (
        <img className="w-full" src={ImgSprint} alt="Sprint Work" />
      )}
    </Link>
    <div className="px-6 py-4">
      <div className="font-bold text-xl mb-2">
        {props.title} - {props.date}
      </div>
      <p
        className="text-grey-darker text-base"
        dangerouslySetInnerHTML={{ __html: props.excerpt }}
      />
    </div>
    <div className="px-6 py-4">
      <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">
        #workstyle
      </span>
    </div>
  </article>
)

export default Card