<script lang="ts">
  import type { DialogOption } from "./types";
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  export let imageUrl: string;
  export let title: string | undefined;
  export let text: string;
  export let options: DialogOption[];
</script>

{#if typeof title === "string"}
  <h3>
    {title}
  </h3>
{/if}

<img src={imageUrl} alt="Portrait" />

<div>
  {#each text.split("\n\n") as para}
    <p>{para}</p>
  {/each}
</div>
<hr />
<div>
  {#each options as option}
    <button on:click={() => dispatch("switchToDialog", option.linksToDialog)}
      >{option.text}</button
    >
    <br />
  {/each}
</div>