import React from "react"
import * as styles from "./index.module.scss"
import Container from "@/components/container"
import cls from "classnames"
import { PROFESSIONAL_CONSULTATION } from "@/constants/support"
import useContactForm from "@/hooks/useContactForm"

interface IProps {
  location: ILocation
}

const ProfessionalConsultation: React.FC<IProps> = ({ location }) => {
  const { dom: ContactFormDOM, handleOpen } = useContactForm(location)

  return (
    <>
      <Container>
        <div
          className={cls(
            "columns is-variable is-2-mobile is-2-tablet is-4-desktop",
            styles.consultationContainer
          )}
        >
          <div className="column is-4">
            <h2>{PROFESSIONAL_CONSULTATION.businessInquiries.title}</h2>
            <p>{PROFESSIONAL_CONSULTATION.businessInquiries.mobile}</p>
            <p>{PROFESSIONAL_CONSULTATION.businessInquiries.phone}</p>
            <p>{PROFESSIONAL_CONSULTATION.businessInquiries.email}</p>
          </div>
          <div className="column is-4">
            <h2>{PROFESSIONAL_CONSULTATION.switchboard.label}</h2>
            <p>{PROFESSIONAL_CONSULTATION.switchboard.value}</p>
          </div>
          <div className="column is-4">
            <h2>{PROFESSIONAL_CONSULTATION.professionalConsulting.title}</h2>
            <p className="pb-4">
              {PROFESSIONAL_CONSULTATION.professionalConsulting.subtitle}
            </p>
            <button
              className="button is-primary is-normal"
              onClick={handleOpen}
            >
              {PROFESSIONAL_CONSULTATION.professionalConsulting.link.label}
            </button>
          </div>
        </div>
      </Container>
      {ContactFormDOM}
    </>
  )
}

export default ProfessionalConsultation