import React from "react"
import cls from "classnames"
import * as styles from "./index.module.scss"
import Container from "@/components/container"
import { CustomLink } from "@/components"
import t from "@/constants/wording"
import { FAMOUS_ENTERPRISES_LINK } from "@/constants/join-us"

const ViewMoreJobs: React.FC = () => {
  return (
    <section
      className={cls("common-bottom-background-primary", styles.viewMoreJobs)}
    >
      <Container>
        <div
          className={cls(
            "is-flex is-justify-content-space-between is-align-items-center common-center-container",
            styles.content
          )}
        >
          <h2>{t("View more high-paying jobs in TiDB")}</h2>
          <CustomLink
            linkTo={FAMOUS_ENTERPRISES_LINK}
            className={cls(
              "button is-medium is-white is-font-color-primary",
              styles.viewMoreJobButton
            )}
          >
            {t("Famous enterprises")}
          </CustomLink>
        </div>
      </Container>
    </section>
  )
}

export default ViewMoreJobs