import cls from "classnames"
import * as styles from "./index.module.scss"
import React from "react"

interface IProps {
  cardInfo: StrapiHomeTechnologyAndInnovation
}

export const CardItem: React.FC<IProps> = ({ cardInfo }) => {
  return (
    <div
      className={cls(styles.item, "column is-one-third-tablet")}
      key={cardInfo.id}
    >
      <div className={cls(styles.customCard, "card")}>
        <div className="card-image">
          <figure className={cls("image is-3by1", styles.image)}>
            <img
              src={cardInfo.image?.media?.url as string}
              alt={cardInfo.image?.alt as string}
            />
          </figure>
        </div>
        <div className={cls(styles.cardContent, "card-content")}>
          <h3 className={styles.h3}>{cardInfo.title}</h3>
          <p className={cls(styles.content, "content has-text-left")}>
            {cardInfo.description}
          </p>
        </div>
      </div>
    </div>
  )
}

export default CardItem