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

//const CUSTOMER_PROFILE_DETAIL =
//  "https://page.ma.scrmtech.com/landing-page/index?pf_uid=19697_1864&id=4396"

const CustomerProfile: React.FC<{
  profile: CustomerProfile
  pdfLink?: string
  location: ILocation
}> = ({ profile, pdfLink, location }) => {
  profile = trimProps(profile)
  const { dom: ContactFormDOM, handleOpen } = useContactForm(location)
  return (
    <>
      <div className={styles.customerProfile}>
        <figure>
          <img src={profile.logo?.media?.url} alt={profile.logo?.alt} />
        </figure>
        <h4>{t("customer profile title")}</h4>
        <div className={styles.content}>
          <ul>
            {profile.industry && (
              <li>
                <label>{t("customer profile industry")}：</label>
                <span>{profile.industry}</span>
              </li>
            )}
            {profile.region && (
              <li>
                <label>{t("customer profile region")}：</label>
                <span>{profile.region}</span>
              </li>
            )}
            {profile.headquarters && (
              <li>
                <label>{t("customer profile location")}：</label>
                <span>{profile.headquarters}</span>
              </li>
            )}
            {profile.scale && (
              <li>
                <label>{t("customer profile scale")}：</label>
                <span>{profile.scale}</span>
              </li>
            )}
          </ul>
          {profile.description && <p>{profile.description}</p>}
        </div>
        <footer>
          {pdfLink && (
            <CustomLink
              linkTo={pdfLink}
              className="button is-primary is-outlined"
            >
              {t("customer profile file")}
            </CustomLink>
          )}
          <button
            onClick={handleOpen}
            className="button is-primary is-fullwidth"
          >
            {t("customer profile detail")}
          </button>
        </footer>
      </div>
      {ContactFormDOM}
    </>
  )
}

export default CustomerProfile