<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"}
  <h2>
    {title}
  </h2>
{/if}

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

<div>
  {@html text}
</div>
<hr />
<div>
  {#each options as option}
    <button on:click={() => dispatch("switchToDialog", option.linksToDialog)}
      >{option.text}</button
    >
    <br />
  {/each}
</div>
<button
  on:click={() => {
    window.close();
  }}>Auf Wiedersehen!</button
>