<script lang="ts" setup>
const route = useRoute();

const articleLink = computed(() => `${window?.location}`);

const { data: page } = await useAsyncData(route.path, () =>
  queryCollection("about").path(`/about/${route.params.slug}`).first()
);
</script>

<template>
  <UPage>
    <div
      class="fixed top-0 left-0 -z-999 w-screen h-screen bg-[url('/images/xiaomai.png')] bg-cover lg:bg-contain bg-no-repeat opacity-40 animate-slide-in"
    ></div>
    <UPageBody class="max-w-3xl mx-auto">
      <ContentRenderer v-if="page?.body" :value="page" />

      <div class="flex items-center justify-end gap-2 text-sm text-muted">
        <UButton
          size="sm"
          variant="link"
          color="neutral"
          label="Copy link"
          @click="
            copyToClipboard(articleLink, 'Article link copied to clipboard')
          "
        />
      </div>
    </UPageBody>
  </UPage>
</template>

<style scoped>
@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 0.4;
  }
}

.animate-slide-in {
  animation: slide-in 1.2s ease-out forwards;
}
</style>
