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.unshadowed &&
      '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" alt={props.imgAlt ? props.imgAlt : 'saburly image'} 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>

        <div className="flex mx-auto justify-center text-black mt-1 opacity-70">
          {props.authorName && <address className="author text-sm m-1 font-bold roman author-name">{props.authorName}</address> }
          {props.date && <time pubdate="true" className="text-sm m-1" dateTime="2011-08-28" title="August 28th, 2011">{props.date}</time> }
        </div>

        {props.subtitle && (
          <span className="text-sm font-medium text-black pt-1 opacity-70">
            {props.subtitle}
          </span>
        )}
      </div>
    </div>
    {props.children}
  </article>
)

export default Card
