import * as React from "react"
import cls from "classnames"
import t from "@/constants/wording"
import { Background, Container, LinkModule } from "@/components"
import { COOPERATIVE_PARTNER } from "@/constants/home"
import { useStaticQuery, graphql, navigate } from "gatsby"

import * as styles from "./index.module.scss"

const CooperativePartner: React.FC = () => {
  const data = useStaticQuery<StrapiHomeImage>(graphql`
    query StrapiCooperativePartnerQuery {
      strapiHome {
        cooperativePartnerBg {
          media {
            url
            width
            height
          }
        }
      }
    }
  `)

  const partnerBg = data.strapiHome.cooperativePartnerBg

  return (
    <Background className={styles.partner} image={partnerBg} isShowMask={false}>
      <Container className={styles.partnerContainer}>
        <div className={styles.partnerInner}>
          <div className="region-header-white">
            <h4>{COOPERATIVE_PARTNER.h4}</h4>
            <h1>{COOPERATIVE_PARTNER.h1}</h1>
            <h5>{COOPERATIVE_PARTNER.h5}</h5>
          </div>
          <div>
            <button
              onClick={() => navigate("/partner")}
              className={cls(
                "button is-primary is-medium",
                styles.partnerBtn,
                styles.mediumBtn
              )}
            >
              {t("become cooperative partner")}
            </button>
          </div>
          <div className={styles.partnerLink}>
            <LinkModule textColor={"white"} to={"/search-partner"}>
              {t("Find all PingCap partners")}
            </LinkModule>
          </div>
        </div>
      </Container>
    </Background>
  )
}

export default CooperativePartner