<script lang="ts">
  import Icon from "@iconify/svelte";
  import "../lib/iconify-offline";
  import Accordion from "./Accordion.svelte";
  import { t, T, type Translations } from "../lib/translations";

  let {
    embedUrl = null,
    linkUrl = null,
    locationText = null,
    label = "Karte",
    translations = null,
  }: {
    embedUrl?: string | null;
    linkUrl?: string | null;
    locationText?: string | null;
    label?: string;
    translations?: Translations | null;
  } = $props();

  let overlayVisible = $state(true);
</script>

<Accordion id="map-section" {label} open class="mt-12">
  <div class="overflow-hidden rounded-lg border border-wald-200 shadow-sm">
    {#if embedUrl}
      <div>
        <div class="relative">
          <iframe
            src={embedUrl}
            width="600"
            height="300"
            class="block w-full border-0"
            loading="lazy"
            title={locationText ? `Karte: ${locationText}` : "Veranstaltungsort"}
          ></iframe>
          {#if overlayVisible}
            <div
              role="button"
              tabindex="0"
              class="absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-[1px] cursor-pointer select-none"
              aria-label="Karte aktivieren"
              onclick={() => { overlayVisible = false; }}
              onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') overlayVisible = false; }}
            >
              <div class="flex items-center gap-2 rounded-full bg-white/90 px-4 py-2 text-xs font-medium text-zinc-700 shadow">
                <Icon icon="mdi:cursor-default-click" class="size-4 shrink-0" aria-hidden="true" />
                {t(translations, T.post_map_activate)}
              </div>
            </div>
          {/if}
        </div>
        {#if linkUrl}
          <a
            href={linkUrl}
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center gap-1.5 px-3 py-1.5 bg-wald-50 text-wald-700 text-[.65rem] font-medium hover:bg-wald-100 transition-colors border-t border-wald-200"
          >
            <Icon icon="mdi:open-in-new" class="size-3.5 shrink-0" aria-hidden="true" />
            {t(translations, T.post_map_open_osm)}
          </a>
        {/if}
      </div>
    {:else if linkUrl}
      <a
        href={linkUrl}
        target="_blank"
        rel="noopener noreferrer"
        class="flex items-center gap-2 px-3 py-2 bg-wald-50 text-wald-700 text-xs font-medium hover:bg-wald-100 transition-colors"
      >
        <Icon icon="mdi:map-marker" class="size-4 shrink-0" aria-hidden="true" />
        {locationText ?? t(translations, T.post_map_open_osm)}
      </a>
    {/if}
  </div>
</Accordion>
