<script setup lang="ts">
/**
 * Props-driven iframe display.
 *
 * Embeds a remote document inside a sandboxed iframe. The wrapper
 * enforces a 16:9 aspect ratio and responsive width by default.
 */
import { computed } from "vue"

export interface IframeDisplayProps {
  src?: string
  title?: string
  sandbox?: string
  classList?: string[] | string
}

const props = withDefaults(defineProps<IframeDisplayProps>(), {
  sandbox: "allow-scripts allow-same-origin",
})

const rootClass = computed<string>(() => {
  const cl = props.classList
  if (!cl) {
    return ""
  }
  return Array.isArray(cl) ? cl.join(" ") : cl
})
</script>

<template>
  <div
    class="relative w-full overflow-hidden rounded-lg border"
    :class="rootClass"
    style="aspect-ratio: 16 / 9"
    data-testid="iframe-display"
  >
    <iframe
      v-if="src"
      :src="src"
      :title="title ?? 'Embedded content'"
      class="absolute inset-0 h-full w-full"
      :sandbox="sandbox"
      loading="lazy"
      referrerpolicy="no-referrer"
    />
  </div>
</template>
