import classNames from 'classnames';
import Script from 'next/script';

import * as css from './styles.module.scss';

const HUBSPOT_ID = 6711345;

export const HubspotForm = ({ formId, adConversionLabel, className, stacked }) => {
  return (
    <>
      <Script
        src="https://js.hsforms.net/forms/v2.js"
        strategy="lazyOnload"
        onLoad={() => {
          window.hbspt.forms.create({
            portalId: HUBSPOT_ID,
            formId: formId,
            target: `#hbspt-form--${formId}`,
            onFormSubmitted() {
              if (adConversionLabel) {
                window.dataLayer.push({
                  event: 'Ad Conversion',
                  adConversionLabel,
                });
              }
            },
          });
        }}
      />

      <div
        className={classNames([css.container, stacked && css['container--stacked'], className])}
        id={`hbspt-form--${formId}`}
      />
    </>
  );
};