<script lang="ts">
  import ImageTile from "$lib/components/ImageTile.svelte";
  import Markdown from "$lib/components/Markdown.svelte";
  import type { PageData } from "./$types";

  // Legacy images
  import sunne_untergang from "$lib/images/fotos/sunne_untergang.webp";
  import monitor from "$lib/images/informatik/monitor.webp";
  import plattespiler from "$lib/images/musig/plattespiler.webp";
  import jochen from "$lib/images/video/jochen.webp";

  let { data }: { data: PageData } = $props();

  const legacyHeaders: Record<string, string> = {
      fotos: sunne_untergang,
      informatik: monitor,
      musig: plattespiler,
      video: jochen
  };

  // Fallback image data URI
  const placeholder = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxyZWN0IGZpbGw9IiMzMzMiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=';
  
  // Use the cover image found by the server, or legacy local image, or placeholder
  let headerImage = $derived(
      data.coverImage || 
      legacyHeaders[data.slug.toLowerCase()] || 
      "" // ImageTile handles empty/null src with placeholder or its own logic
  );
</script>

<svelte:head>
  <title>{data.title} - schreifuchs.ch</title>
</svelte:head>

<ImageTile src={headerImage} alt={data.title}>
    <h2 class="flex items-center justify-center h-full text-3xl font-bold text-white text-shadow-lg">
        {data.title}
    </h2>
</ImageTile>

<main class="flex items-center justify-center pt-8 bg-black min-h-screen px-12">
  <section class="max-w-screen-md w-full">
    <Markdown content={data.content} basePath={`/${data.slug}`} />
  </section>
</main>