<script lang="ts">
  import Icon from "@iconify/svelte";
  import "../lib/iconify-offline";

  let {
    eventDate = null,
    locationText = null,
    locationHref = null,
  }: {
    eventDate?: string | null;
    locationText?: string | null;
    locationHref?: string | null;
  } = $props();

  function formatEventDate(dateStr: string): string | null {
    try {
      return new Date(dateStr).toLocaleDateString("de-DE", {
        weekday: "short", day: "2-digit", month: "short",
        year: "numeric", hour: "2-digit", minute: "2-digit",
      });
    } catch { return null; }
  }

  const dateLabel = $derived(eventDate ? formatEventDate(eventDate) : null);
</script>

{#if dateLabel || locationText}
  <div class="flex flex-wrap gap-2">
    {#if dateLabel}
      <span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-wald-500 px-3 py-1 text-[.65rem] font-semibold text-white shadow-sm">
        <Icon icon="mdi:calendar" class="size-3.5 shrink-0 opacity-90" aria-hidden="true" />
        {dateLabel}
      </span>
    {/if}
    {#if locationText}
      {#if locationHref}
        <a href={locationHref} target={locationHref.startsWith('#') ? undefined : '_blank'} rel={locationHref.startsWith('#') ? undefined : 'noopener noreferrer'} class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-neutral-800 text-neutral-50! px-3 py-1 text-[.65rem] shadow-sm hover:bg-neutral-700 transition-colors no-underline!">
          <Icon icon="mdi:map-marker" class="size-3.5 shrink-0 opacity-90" aria-hidden="true" />
          {locationText}
        </a>
      {:else}
        <span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-neutral-800 text-neutral-50 px-3 py-1 text-[.65rem] font-medium shadow-sm">
          <Icon icon="mdi:map-marker" class="size-3.5 shrink-0 opacity-90" aria-hidden="true" />
          {locationText}
        </span>
      {/if}
    {/if}
  </div>
{/if}
