<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";

const route = useRoute();
const { t } = useI18n();

const title = computed(() => t(String(route.meta.titleKey ?? "common.details")));
const description = computed(() => t(String(route.meta.descriptionKey ?? "common.noData")));
</script>

<template>
  <section class="stub-view">
    <div class="stub-view__hero">
      <p class="eyebrow">{{ t("featureStub.eyebrow") }}</p>
      <h2>{{ title }}</h2>
      <p>{{ description }}</p>
    </div>

    <div class="stub-view__grid">
      <article class="stub-card">
        <h3>{{ t("featureStub.currentStatus") }}</h3>
        <p>{{ t("featureStub.currentStatusText") }}</p>
      </article>

      <article class="stub-card">
        <h3>{{ t("featureStub.nextPriority") }}</h3>
        <p>{{ description }}</p>
      </article>

      <article class="stub-card">
        <h3>{{ t("featureStub.integrationStrategy") }}</h3>
        <p>{{ t("featureStub.integrationStrategyText") }}</p>
      </article>
    </div>
  </section>
</template>
