import * as React from "react"
import cls from "classnames"
import { useStaticQuery, graphql } from "gatsby"
import t from "@/constants/wording"
import { CustomLink } from "@/components"
import * as styles from "./index.module.scss"

interface IProps {
  logo?: ImageComponent
  whitePaperLink?: string
}

const DetailCard: React.FC<IProps> = ({ logo, whitePaperLink }) => {
  const data = useStaticQuery<StrapiHomeImage>(graphql`
    query StrapiJointSolutionDeatileCardQuery {
      strapiHome {
        TiDBLogo {
          media {
            url
            width
            height
          }
        }
      }
    }
  `)
  const TiDBLogo = data.strapiHome.TiDBLogo

  return (
    <div className={cls(styles.jointSolutionDetailCard)}>
      <header>
        <figure>
          <img src={TiDBLogo.media.url} alt={"TiDB"} />
        </figure>
        {logo && (
          <figure>
            <img src={logo.media.url} alt={logo.alt} />
          </figure>
        )}
      </header>
      <h4>{t("Get more detailed introduction")}</h4>
      <footer>
        {whitePaperLink && (
          <CustomLink
            linkTo={`${whitePaperLink}`}
            className="button is-primary is-outlined"
          >
            {t("white paper file")}
          </CustomLink>
        )}
        <CustomLink linkTo={"/contact"} className="button is-primary">
          {t("contact banner title")}
        </CustomLink>
      </footer>
    </div>
  )
}
export default DetailCard