/**
 * TallyForm.jsx - Gedeeld component voor embedded Tally formulieren
 *
 * Gebruik: <TallyForm formId="XxGBrV" title="Inschrijving Claude Code Workshop" />
 */

import { useEffect } from 'react';

function TallyForm({ formId, title }) {
  useEffect(() => {
    const scriptUrl = 'https://tally.so/widgets/embed.js';

    if (typeof window.Tally !== 'undefined') {
      window.Tally.loadEmbeds();
      return;
    }

    if (!document.querySelector(`script[src="${scriptUrl}"]`)) {
      const script = document.createElement('script');
      script.src = scriptUrl;
      script.onload = () => {
        if (typeof window.Tally !== 'undefined') {
          window.Tally.loadEmbeds();
        }
      };
      document.body.appendChild(script);
    }
  }, []);

  return (
    <div className="card">
      <iframe
        data-tally-src={`https://tally.so/embed/${formId}?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1`}
        loading="lazy"
        width="100%"
        height="300"
        frameBorder="0"
        title={title}
      />
    </div>
  );
}

export default TallyForm;
