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 bg-white ${!props.teamMember &&
      'border-bottom-saburly hover:shadow'}`}
  >
    <div className={`relative ${!props.team ? 'hover:opacity-50' : ''}`}>
      {props.image && <img className="w-full" src={props.image.src} />}
      {props.teamMember && (
        <img className="w-full rounded" src={props.teamMember} />
      )}
      <div
        className={`px-6 py-4 ${
          props.team ? 'absolute pin-b' : ''
        } text-center w-full bg-white-opacity`}
      >
        <h3 className="text-black font-medium text-center text-xl">
          {props.title}
        </h3>
        {props.subtitle && (
          <span className="text-sm font-medium text-black pt-1 opacity-70">
            {props.subtitle}
          </span>
        )}
      </div>
    </div>
  </article>
)

export default Card