<template>
  <button
    @click="showModal = true"
    class="inline-flex flex-col items-center gap-1 px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 font-medium"
  >
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
    </svg>
    <span class="text-xs">QR Code</span>
  </button>

  <QRCodeModal 
    v-if="showModal" 
    :sermon="sermon" 
    @close="showModal = false" 
  />
</template>

<script setup lang="ts">
interface Sermon {
  id?: number
  slug: string
  title: string
  date: string
  bible_references: string
  personal_appliance: string
  pastors_challenge: string
}

defineProps<{
  sermon: Sermon
}>()

const showModal = ref(false)
</script>
