<template>
  <div class="page-container">
    <div v-if="pending" class="flex justify-center items-center h-64">
      <el-spinner />
    </div>
    <div v-else>
      <support-tabs model-value="faq" />
      <div class="page-header">
        <h1 class="page-title">{{ $t("navigation.faq") }}</h1>
        <el-breadcrumb class="breadcrumb" separator="/">
          <el-breadcrumb-item class="text-md opacity-50">
            <NuxtLink :to="$localePath('/')">{{
              $t("navigation.home")
            }}</NuxtLink>
          </el-breadcrumb-item>
          <el-breadcrumb-item class="text-md opacity-50">
            <NuxtLink :to="$localePath('/support')">{{
              $t("navigation.support")
            }}</NuxtLink>
          </el-breadcrumb-item>
          <el-breadcrumb-item class="text-md opacity-50">
            <NuxtLink :to="$localePath('/support/faq')">{{
              $t("navigation.faq")
            }}</NuxtLink>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="page-content">
        <question-list :questions="questions" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { find } = useStrapi();
const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale();

const questions = ref<Question[]>([]);

const pending = ref(true);

onMounted(async () => {
  try {
    const faqData = await find<Question>("questions", {
      locale: strapiLocale,
    });
    if (faqData) {
      questions.value = faqData.data || [];
    }
  } catch (error) {
    console.error("Failed to fetch FAQ data:", error);
  } finally {
    pending.value = false;
  }
});
</script>

<style scoped>
.page-container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  padding: 2rem 2rem 0rem;
}

.page-title {
  font-size: 2rem;
  font-weight: bold;
  color: var(--el-color-primary);
  margin-bottom: 1rem;
}

.breadcrumb {
  margin-left: auto;
}

.page-content {
  padding: 1rem 2rem 2rem;
}
</style>
