import * as React from "react"
import { Container } from "@/components"
import t from "@/constants/wording"
import * as styles from "./index.module.scss"
import useContactForm from "@/hooks/useContactForm";

interface IProps {
  text: {
    title: string
    subTitle?: string
    btnTitle?: string
  }
  location: ILocation
}

const BecomePartner: React.FC<IProps> = ({ text, location }) => {
  const { dom: ContactFormDOM, handleOpen } = useContactForm(location)
  return (
    <>
      <div className={styles.becomePartner}>
        <Container>
          <h2>{text.title}</h2>
          {text.subTitle && <h5>{text.subTitle}</h5>}
          <button
            onClick={handleOpen}
            className="button is-primary is-medium"
          >
            {text.btnTitle ?? t("apply to join")}
          </button>
        </Container>
      </div>
      {ContactFormDOM}
    </>
  )
}

export default BecomePartner