---
const { event_path } = Astro.props;
---

<button
  class="px-5 py-3 rounded-md text-background bg-foreground font-bold drop-shadow-md hover:drop-shadow-accent hover:bg-accent transition-all duration-300 m-3"
  data-cal-link={`jhdeloche/${event_path}`}
  data-cal-namespace=""
  data-cal-config='{"layout":"month_view"}'
>
  <slot />
</button>

<script is:inline>
  (function (C, A, L) {
    let p = function (a, ar) {
      a.q.push(ar);
    };
    let d = C.document;
    C.Cal =
      C.Cal ||
      function () {
        let cal = C.Cal;
        let ar = arguments;
        if (!cal.loaded) {
          cal.ns = {};
          cal.q = cal.q || [];
          d.head.appendChild(d.createElement("script")).src = A;
          cal.loaded = true;
        }
        if (ar[0] === L) {
          const api = () => p(api, arguments);
          const namespace = ar[1];
          api.q = api.q || [];
          typeof namespace === "string"
            ? (cal.ns[namespace] = api) && p(api, ar)
            : p(cal, ar);
          return;
        }
        p(cal, ar);
      };
  })(window, "https://cal.jhunterdeloche.com/embed/embed.js", "init");
  Cal("init", { origin: "https://cal.jhunterdeloche.com" });

  Cal("ui", {
    hideEventTypeDetails: false,
    layout: "month_view",
  });
</script>
