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

interface IProps {
  node: JointSolution
  TiDBLogo?: ImageComponent
}

const JointSolutionCard: React.FC<IProps> = ({ node, TiDBLogo }) => {
  return (
    <div
      className={cls("column is-4-desktop is-6-tablet px-4", styles.jointLoop)}
    >
      <div
        onClick={() =>
          navigate(`/joint-solution-detail/${node.customUrl ?? node.id}`)
        }
        className={cls("card-animate-up", styles.jointInner)}
      >
        <div className={styles.jointHeader}>
          {TiDBLogo && (
            <img src={TiDBLogo?.media?.url} alt={TiDBLogo?.alt || "TiDB"} />
          )}
          {TiDBLogo && node.jointCompanyLogo?.media?.url && (
            <span className={styles.line}></span>
          )}
          {node.jointCompanyLogo?.media?.url && (
            <img
              src={node.jointCompanyLogo?.media?.url}
              alt={node.jointCompanyLogo?.alt}
            />
          )}
        </div>
        <h4 className={styles.jointTitle}>{node.title}</h4>
      </div>
    </div>
  )
}

export default JointSolutionCard