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

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

const Card = ({ ...props }) => (
  <article className="h-full w-full rounded overflow-hidden shadow-md hover:shadow-lg">
  <Link to={props.url}>
      {props.image ? (
        <img className="w-full" src={props.image.src} />
      ) : (
        <img className="w-full" src={ImgSprint} alt="Sprint Work" />
      )}
    </Link>
    <div className="px-6 py-4">
      <Link className="no-underline" to={props.url}>
        <h3 className="text-black font-bold text-xl mb-2">{props.title}</h3>
      </Link>
      <p
        className="text-grey-darker text-base"
        dangerouslySetInnerHTML={{ __html: props.excerpt }}
      />
    </div>
  </article>
)

export default Card