<script>
  let { src } = $props()
  let text = $state('')
  let loading = $state(true)

  $effect(() => {
    fetch(src)
      .then(r => r.text())
      .then(t => {
        text = t
        loading = false
      })
      .catch(() => {
        text = 'Failed to load text content.'
        loading = false
      })
  })
</script>

<div class="text-viewer">
  {#if loading}
    <p>Loading text...</p>
  {:else}
    <pre>{text}</pre>
  {/if}
</div>

<style>
  .text-viewer {
    max-width: 900px;
    margin: 24px auto;
    padding: 24px;
    background: var(--retro-panel);
    border: 3px solid var(--retro-border);
    box-shadow: 6px 6px 0px var(--retro-shadow);
  }
  pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    line-height: 1.5;
    max-height: 80vh;
    overflow-y: auto;
  }
</style>
