<!-- 上一篇 下一篇 -->
<script setup lang="ts">
import {detail} from "~/utils/common";
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import {getNext, getPrevious} from "~/api/cms/cmsArticle";

const props = withDefaults(
    defineProps<{
      articleId?: number;
    }>(),
    {}
);

const i18n = useI18n();
const previousArticle = ref<CmsArticle>();
const nextArticle = ref<CmsArticle>();

// 上一篇
previousArticle.value = await getPrevious({
  articleId: props.articleId,
  lang: i18n.locale.value
})
// 下一篇
nextArticle.value = await getNext({
  articleId: props.articleId,
  lang: i18n.locale.value
})

</script>

<template>
  <div class="flex justify-between my-3 gap-4">
      <nuxt-link :to="previousArticle ? detail(previousArticle) : ''" class="w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
        <span class="text-lg text-gray-800">{{ previousArticle?.title || '没有了' }}</span>
        <span class="text-gray-400">{{ $t('previous') }}</span>
      </nuxt-link>
      <nuxt-link :to="nextArticle ? detail(nextArticle) : ''" class="w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
        <span class="text-lg text-gray-800">{{ nextArticle?.title || '没有了' }}</span>
        <span class="text-gray-400">{{ $t('next') }}</span>
      </nuxt-link>
  </div>
<!--  <div class="page flex flex-col">-->
<!--            <span class="text-left">-->
<!--              {{ $t('previous') }}：<a :href="detail(previousArticle)">{{ previousArticle?.title }}</a>-->
<!--            </span>-->
<!--            <span class="text-left">-->
<!--              {{ $t('next') }}：<a :href="detail(nextArticle)">{{ nextArticle?.title }}</a>-->
<!--            </span>-->
<!--  </div>-->
</template>

<style scoped lang="scss">

</style>
