<script lang="ts">
  import type { TopBannerEntry } from '$lib/cms';
  import { marked } from '$lib/markdown-safe';

  let { banner }: { banner: TopBannerEntry } = $props();

  const textHtml = $derived(banner?.text ? marked.parseInline(banner.text) as string : '');
</script>

{#if banner?.text}
  <div class="w-full bg-wald-600 text-white print:hidden" role="note" style="font-size: 0.7rem;">
    <div class="container-custom flex items-center gap-3 py-2 md:justify-center md:text-center">
      <span>{@html textHtml}</span>
      {#if banner.link}
        <a
          href={banner.link}
          class="shrink-0 font-semibold underline underline-offset-2 hover:no-underline"
        >
          {banner.linkLabel ?? 'Mehr erfahren'} →
        </a>
      {/if}
    </div>
  </div>
{/if}
