<script setup lang="ts">
import { useData } from "vitepress";
import { computed } from "vue";
import { data as posts } from "../composables/posts.data";
import TopBar from "./TopBar.vue";

import { useRoute } from "vitepress";

const route = useRoute();

const currentIndex = computed(() =>
  posts.findIndex((p) => p.url === route.path),
);
const currentPost = computed(() =>
  currentIndex.value > -1 ? posts[currentIndex.value] : null,
);

const nextPost = computed(() => {
  return currentIndex.value < posts.length - 1
    ? posts[currentIndex.value + 1]
    : null;
});

const prevPost = computed(() => {
  return currentIndex.value > 0 ? posts[currentIndex.value - 1] : null;
});
</script>

<template>
  <div class="blog-layout">
    <TopBar />

    <article class="blog-post">
      <Content />
    </article>

    <hr />

    <nav class="post-navigation">
      <!-- Previous post link -->
      <div v-if="prevPost" class="prev-post">
        <a :href="prevPost.url">← {{ prevPost.title }}</a>
      </div>
      <div v-if="nextPost" class="next-post">
        <a :href="nextPost.url">{{ nextPost.title }} →</a>
      </div>
    </nav>
  </div>
</template>

<style scoped>
.blog-layout {
}
.blog-post {
  max-width: 700px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.post-navigation {
  display: flex;
  justify-content: space-between;
  margin: 2rem auto;
  max-width: 700px;
}
</style>
