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

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

const HoverDescriptionCard: React.FC<HoverDescriptionCardProps> = ({
  logo,
  title,
  description,
  to,
  attrs,
}) => {
  return (
    <div className={styles.mediaCard} {...attrs}>
      <Link to={to} className={styles.mediaLink}>
        {logo && mediaLeft(logo)}
        <div
          className={cls(
            "media-content",
            styles.mediaContent,
            logo ? styles.hasLogo : styles.noLogo,
            description ? styles.hasDescription : styles.noDescription
          )}
        >
          <h4 className="has-text-left">{title}</h4>
          {description && (
            <p className="content has-text-left">{description}</p>
          )}
        </div>
      </Link>
    </div>
  )
}

export default HoverDescriptionCard