"use client";
/**
 * VenueFlow boek-widget voor Next.js (React).
 * Kopieer dit bestand naar je components/ en gebruik:
 *   <VenueflowBooking tenant="jouw-slug" api="https://api.venueflow.eu" variant="strip" accent="#0f766e" />
 *
 * Het is een client-component (laadt de widget in de browser). In React ≥19 werken
 * custom elements met gewone attributen out of the box.
 *   api = waar de booking-API draait (data)
 *   src = waar de widget-kern (JS) vandaan komt — standaard de VenueFlow-site
 */
import { useEffect } from "react";

const WIDGET_SRC = "https://venueflow.nl/widget/venueflow-widget.js";

type Props = {
  tenant: string;
  /** waar de booking-API draait (data) */
  api?: string;
  /** waar de widget-kern (JS) staat — standaard de VenueFlow-site */
  src?: string;
  /** datum/tijd-kiezer: "strip" (weekstrip) | "calendar" (maandkalender) | "timeline" (dagbalk) */
  variant?: "strip" | "calendar" | "timeline";
  accent?: string;
  /** hoekafronding in px */
  radius?: string | number;
  /** optionele venue-naam in de widgetkop */
  name?: string;
  locale?: "nl" | "en";
  redirect?: string;
};

export default function VenueflowBooking({
  tenant, api = "https://api.venueflow.eu", src = WIDGET_SRC, variant = "strip",
  accent = "#0f766e", radius = 16, name = "", locale = "nl", redirect = "",
}: Props) {
  useEffect(() => {
    if (customElements.get("venueflow-booking")) return;
    const s = document.createElement("script");
    s.src = src;
    s.async = true;
    document.head.appendChild(s);
  }, [src]);

  // @ts-expect-error — custom element
  return <venueflow-booking tenant={tenant} api={api} variant={variant} accent={accent} radius={String(radius)} name={name} locale={locale} redirect={redirect} />;
}