import React from "react"
import { Background, CustomLink } from "@/components"
import t from "@/constants/wording"
import * as styles from "./index.module.scss"
import { VIEW_JOB_LINK } from "@/constants/join-us"

interface IProps {
  image: {
    media: BackgroundImg
  }
}

const JoinUsBanner: React.FC<IProps> = ({ image }) => {
  return (
    <Background className={styles.banner} image={image}>
      <div className={styles.container}>
        <h1>{t("Join PingCAP")}</h1>
        <h5>{t("We are a young, open and free team")}</h5>
        <CustomLink
          className="button is-white is-medium"
          linkTo={VIEW_JOB_LINK}
        >
          {t("View Jobs")}
        </CustomLink>
      </div>
    </Background>
  )
}

export default JoinUsBanner