<template>
  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" @click.self="$emit('close')">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-gray-900">Scan to View Sermon</h3>
        <button
          @click="$emit('close')"
          class="text-gray-400 hover:text-gray-600"
        >
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      
      <div class="flex flex-col items-center">
        <div class="bg-white p-4 rounded-lg border-2 border-gray-200">
          <canvas ref="qrCanvas"></canvas>
        </div>
        <p class="mt-4 text-sm text-gray-600 text-center">{{ sermon.title }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import QRCode from 'qrcode'

interface Sermon {
  id?: number
  slug: string
  title: string
  date: string
  bible_references: string
  personal_appliance: string
  pastors_challenge: string
}

const props = defineProps<{
  sermon: Sermon
}>()

defineEmits<{
  close: []
}>()

const qrCanvas = ref<HTMLCanvasElement | null>(null)
const config = useRuntimeConfig()

onMounted(async () => {
  if (qrCanvas.value) {
    const url = `${config.public.siteUrl}/${props.sermon.slug}`
    await QRCode.toCanvas(qrCanvas.value, url, {
      width: 256,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    })
  }
})
</script>
