<script setup>
import QRCode from 'qrcode';

// Реактивная переменная для хранения текста QR-кода
const qrText = ref('');

// Ссылка на элемент canvas для рендеринга QR-кода
const qrCanvas = ref(null);

// Генерация QR-кода
const generateQR = async () => {
  try {
    await QRCode.toCanvas(qrCanvas.value, qrText.value, {
      width: 500,
    });
  } catch (error) {
    console.error('Ошибка при генерации QR-кода:', error);
  }
};

onMounted(() => {
  const currentUrl = window.location.href;
  qrText.value = currentUrl.startsWith('http') ? currentUrl : `https://${currentUrl}`;
  generateQR();
});
</script>

<template>
  <div>
    <Seo />
    <div class="siteblock">
      <div class="container text-center">
        <h1 class="siteblock-title">QR-КОД</h1>
        <div class="col-span-full">
          <canvas class="border mx-auto" ref="qrCanvas"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>