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

interface IProps {
  cardInfo: InsightArticle
  disableAllInsightClassName?: boolean
}

export const CardItem: React.FC<IProps> = ({
  cardInfo,
  disableAllInsightClassName,
}) => {
  const innerDOM = (
    <div
      className={cls(
        styles.articleCard,
        disableAllInsightClassName ? "" : "card-animate-up"
      )}
    >
      <div className="card-image">
        <figure className={cls("image is-16by9", styles.image)}>
          <img src={cardInfo.image?.media.url} alt={cardInfo.image?.alt} />
        </figure>
      </div>
      <div className={styles.content}>
        <p>{cardInfo.lable}</p>
        <h4>{cardInfo.title}</h4>
        <div className={styles.articleDescription}>
          {cardInfo.description}
        </div>
      </div>
    </div>
  )
  if (cardInfo.type === "link") {
    return (
      <a
        href={cardInfo.body}
        target="_blank"
        rel="noopener noreferrer"
        className={cls(
          disableAllInsightClassName
            ? ""
            : "column is-12-mobile is-6-tablet is-4-desktop",
          styles.articleItem
        )}
      >
        {innerDOM}
      </a>
    )
  } else {
    return (
      <Link
        to={`/insight-detail/${cardInfo.customUrl ?? cardInfo.id}`}
        className={cls(
          disableAllInsightClassName
            ? ""
            : "column is-12-mobile is-6-tablet is-4-desktop",
          styles.articleItem
        )}
      >
        {innerDOM}
      </Link>
    )
  }
}

export default CardItem