<script setup lang="ts">

const props = defineProps<{
  link: string
}>()

const emit = defineEmits<{
  // submit: [values: InstallationFormData, resetForm: () => void]
  // cancel: [resetForm: () => void]
}>()

// Form cancel handler
// function onCancelForm({ resetForm }: { resetForm: () => void }) {
//   emit('cancel', resetForm)
// }
function onExternalLink() {
  navigateTo(props.link, {external: true,open: { target: "_blank" },});
}
</script>

<template>
  <Button variant="link" class="absolute top-4 right-16" @click="onExternalLink">
    Open in Browser
    <Icon name="i-lucide-external-link" class="h-4 w-4" />
  </Button>
  <div class="border border-gray-400 rounded-lg w-full h-[80vh] overflow-hidden">
    <embed style="width: 100%; height: 100%" :src="props.link" />
  </div>
</template>