<script lang="ts">
import locale from "$stores/locale";

interface MangaDexChapter {
	id: string;
	attributes: {
		volume?: string;
		chapter: string;
		title?: string;
	};
}

interface MangaDexData {
	data: MangaDexChapter[];
}

export let data: MangaDexData;
</script>

<ul>
  {#each data.data as chapter}
    <li>
      {#if chapter.attributes.volume}
        {$locale().reader?.vol} {chapter.attributes.volume}
      {/if}
      {$locale().reader?.ch} {chapter.attributes.chapter}
      <span class="opaque">|</span>
      <a
        href={`https://mangadex.org/chapter/${chapter.id}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        {chapter.attributes.title || $locale().reader?.readFallback || 'Read'}
      </a>
    </li>
  {/each}
</ul>
