<template>
  <div class="flex flex-col min-h-full">
    <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6">
      <section class="max-w-prose w-full flex flex-col gap-10">
        <QueryRender :query #default="{ data: doc }">
          <template v-for="action in doc.actions" :key="action">
            <ReadContactInfo
              v-if="action === 'viewContactInfo' && doc.contactInfo"
              :contactInfo="doc.contactInfo"
            />
            <ReadMessageSender v-else-if="action === 'sendMessage'" :doc />
          </template>
        </QueryRender>
      </section>
    </main>

    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">
      <p>
        Нужен такой же?
        <a href="/create" class="underline">Создайте свой QR‑код</a>.
      </p>
      <p class="mt-1">
        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/donate" class="underline"
          >поддержке</a
        >.
      </p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'
import { getQrCodeDocument } from '@/api/qrCode'
import type { QRCodeDocument } from '@/types/DBDocumentTypes'
import QueryRender from '@/components/QueryRender.vue'

const { qr_code_uri } = defineProps<{ qr_code_uri: string }>()

// Хук для загрузки данных QR-кода
const query = useQuery({
  queryKey: ['qrCodeData', qr_code_uri],
  queryFn: (): Promise<QRCodeDocument> => getQrCodeDocument(qr_code_uri),
})
</script>
