<script setup lang="ts">
import { getCockpitUrl } from "@/utils/utils";
import { useDashboardStore } from "@/stores/dashboard";

const dashboardStore = useDashboardStore();
</script>

<template>
  <div v-if="dashboardStore.currentDashboardConfig">
    <div class="mb-14 flex flex-col space-y-8">
      <div
        v-for="config in dashboardStore.dashboardConfigs"
        :key="config.id"
        class="h-full bg-white p-6"
      >
        <h3 class="mb-4">{{ config.name }}</h3>
        <div>
          <router-link
            class="btn-blue"
            target="_blank"
            :to="getCockpitUrl(config.slug)"
            :data-cy="`continue-course-${config.id}`"
          >
            {{ $t("a.Cockpit anschauen") }}
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
