<script lang="ts">
  import type { AppContent, ContentBlock } from '$lib/types/content';

  export let app: AppContent;

  function blockKey(block: ContentBlock, index: number) {
    if ('text' in block) return `${block.type}-${block.text}-${index}`;
    return `${block.type}-${index}`;
  }
</script>

<article class="content-window" aria-label={app.title}>
  {#each app.content as block, index (blockKey(block, index))}
    {#if block.type === 'heading'}
      <h2>{block.text}</h2>
    {:else if block.type === 'paragraph'}
      <p>{block.text}</p>
    {:else if block.type === 'quote'}
      <blockquote>{block.text}</blockquote>
    {:else if block.type === 'list'}
      <ul>
        {#each block.items as item}
          <li>{item}</li>
        {/each}
      </ul>
    {:else if block.type === 'cards'}
      <div class="content-cards">
        {#each block.cards as card}
          <section class="content-card">
            <h3>{card.title}</h3>
            <p>{card.body}</p>
          </section>
        {/each}
      </div>
    {:else if block.type === 'cta'}
      <p class="content-cta">
        <a href={block.href}>{block.label}</a>
        {#if block.note}<span>{block.note}</span>{/if}
      </p>
    {/if}
  {/each}
</article>
