<template>
  <UButton
    @click="showQRCode = true"
    variant="ghost"
    color="gray"
    size="sm"
    icon="i-heroicons-qr-code"
    :aria-label="`Show QR code for ${title}`"
  />
</template>

<script setup lang="ts">
interface Props {
  url: string
  title?: string
}

const props = defineProps<Props>()
const showQRCode = ref(false)

const fullUrl = computed(() => {
  if (process.client) {
    return `${window.location.origin}${props.url}`
  }
  return props.url
})

// Emit event to parent component to show modal
const emit = defineEmits<{
  click: [value: boolean]
}>()

watch(showQRCode, (open) => {
  if (open) {
    emit('click', open)
  }
})
</script>
