import { useEffect } from "react";
import Cal, { getCalApi } from "@calcom/embed-react";
import { CAL_CONFIG } from "@/lib/config.ts";

// Rein den cal.com-Embed - keine Umgebung, kein Wrapper.
// Wird sowohl vom Modal (booking-dialog.tsx) als auch von der Route
// /termin genutzt, damit Konfiguration und Verhalten identisch bleiben.
export default function BookingEmbed() {
    useEffect(() => {
        (async () => {
            const cal = await getCalApi({
                namespace: CAL_CONFIG.namespace,
                embedJsUrl: CAL_CONFIG.embedJsUrl,
            });
            cal("ui", {
                hideEventTypeDetails: false,
                layout: "month_view",
            });
        })();
    }, []);

    return (
        <Cal
            namespace={CAL_CONFIG.namespace}
            calLink={CAL_CONFIG.calLink}
            style={{ width: "100%", height: "100%", overflow: "scroll" }}
            config={{
                layout: "month_view",
                useSlotsViewOnSmallScreen: "true",
            }}
            calOrigin={CAL_CONFIG.origin}
            embedJsUrl={CAL_CONFIG.embedJsUrl}
        />
    );
}