<script setup lang="ts">
import type { Topic } from "@/types";

const props = defineProps<{
  topics: Topic[];
}>();

const scrollToTopic = (topic: Topic) => {
  const id = `topic-${topic.slug}`;
  const el = document.getElementById(id);
  el?.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
};
</script>

<template>
  <div class="text-sm text-gray-800">
    <span>{{ $t("learningPathPage.topics") }}</span>
    <button
      v-for="topic in props.topics"
      :key="topic.slug"
      class="pl-2 underline sm:pl-4"
      @click="scrollToTopic(topic)"
    >
      {{ topic.title }}
    </button>
  </div>
</template>
