<script setup lang="ts">
defineProps<{
  docs: string
}>()
const route = useRoute()

const isExpanded = ref(false)
</script>

<template>
  <div class="dropdown dropdown-top dropdown-end fixed bottom-0 right-0 p-4 w-full flex justify-end z-60">
    <label tabindex="0" class="btn bg-white text-gray-600 hover:bg-gray-100 cursor-pointer rounded-full"
      ><i class="i-tabler-info-circle"></i
    ></label>
    <div
      tabindex="0"
      class="mb-8 w-500px dropdown-content px-4 shadow bg-base-100 rounded-box pb-8 mr-4 z-20 overflow-scroll max-h-screen-md"
      :class="{ 'w-9/10 sm:h-screen-xs md:h-screen-sm lg:h-screen-md': isExpanded }"
    >
      <header
        class="w-full flex justify-end py-2 bg-light-50 dark:bg-transparent text-gray-600 dark:text-light-200 dark:bg-dark-600 sticky top-0"
      >
        <button class="btn btn-ghost btn-sm rounded-full" @click="isExpanded = !isExpanded">
          <i :class="isExpanded ? 'i-tabler:arrows-diagonal-minimize' : 'i-tabler:arrows-diagonal-2'"></i>
        </button>
      </header>
      <div v-if="docs" v-html="docs" class="pt-4"></div>
      <div v-if="route.meta && !docs">
        <div class="prose mb-8">
          <img :src="route.meta.media || ''" alt="" />
          <h2>{{ route.meta.title }}</h2>
          <p>{{ route.meta.description }}</p>
        </div>
        <ul class="flex pr-8">
          <li v-for="tag in route.meta.tags">
            <span class="badge badge-outline mr-8">{{ tag }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
