<template>
  <div class="content-wrapper">
    <ContentRenderer :value="doc" v-if="!isMobile" /> <!-- Render the markdown content for laptop -->
    <ContentRenderer :value="mobileDoc" v-if="isMobile" /> <!-- Render the markdown content for mobile -->
  </div>
  <video controls width="640">
      <source src="/videos/video.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
</template>

<script setup>
// Import Vue's reactive and ref from 'vue'
import { ref, onMounted } from 'vue'

// Determine if the device is mobile
const isMobile = ref(false)

// Fetch the markdown content files asynchronously
const { data: doc } = await useAsyncData('markdownDoc', () =>
  queryContent('markdown_laptop').findOne()
)
const { data: mobileDoc } = await useAsyncData('mobileMarkdownDoc', () =>
  queryContent('markdown_mobile').findOne()
)

// Add event listener to update isMobile based on window resize when the component is mounted
onMounted(() => {
  isMobile.value = window.innerWidth <= 768

  window.addEventListener('resize', () => {
    isMobile.value = window.innerWidth <= 768
  })
})
</script>
