import React, {useState} from "react"
import { CustomLink, Container } from "@/components"
import t from "@/constants/wording"
import * as styles from "./index.module.scss"
import ContactForm from "@/components/contact-form";

type IProps = {
  link: string
}

const Consultation: React.FC<IProps> = ({ link }) => {
  const [isOpen, setIsOpen] = useState(false)
  const handleOpen = () => {
    document.getElementsByTagName("html")[0].style.overflow = "hidden"
    setIsOpen(true)
  }
  const handleClose = () => {
    document.getElementsByTagName("html")[0].style.overflow = ""
    setIsOpen(false)
  }
  return (
    <div className={styles.container}>
      <Container className={styles.customContainer}>
        <h2 className={styles.h2}>{t("we are happy to provide advice")}</h2>
        <p className={styles.desc}>
          {t("interested in PingCAP but don't know where to start")}
        </p>
        <div
          className="button is-primary is-medium"
          onClick={handleOpen}
        >
          {" "}
          {t("immediately consult")}{" "}
        </div>
      </Container>
      <ContactForm
        isOpen={isOpen}
        handleOpen={handleOpen}
        handleClose={handleClose}
      />
    </div>
  )
}

export default Consultation