import React from "react"
import cls from "classnames"
import { Link } from "gatsby"
import * as styles from "./index.module.scss"

const mediaLeft = (image: ImageComponent) => (
  <div
    className={cls(
      "media-left is-flex is-align-items-center",
      styles.mediaLeft
    )}
  >
    <img src={image.media.url} alt={image.alt} />
  </div>
)

const MediaCard: React.FC<MediCardProps> = ({
  image,
  title,
  description,
  to,
  attrs,
}) => {
  return (
    <Link
      to={to}
      className={cls(
        "column is-12-mobile is-6-tablet is-3-desktop px-4 media",
        styles.mediaCard
      )}
      {...attrs}
    >
      {image && mediaLeft(image)}
      <div className={cls("media-content", styles.mediaContent)}>
        <h4 className="has-text-left">{title}</h4>
        <p className="content has-text-left">{description}</p>
      </div>
    </Link>
  )
}

export default MediaCard