<script setup lang="ts">
/**
 * Props-driven video display.
 *
 * Renders a native HTML5 `<video controls>` player. Pass `autoplay`,
 * `loop`, and `muted` to enable the corresponding behaviours.
 */
import { computed } from "vue"

export interface VideoPlayerDisplayProps {
  src?: string
  autoplay?: boolean
  loop?: boolean
  muted?: boolean
  classList?: string[] | string
}

const props = defineProps<VideoPlayerDisplayProps>()

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

<template>
  <div
    class="w-full"
    :class="rootClass"
    data-testid="video-display"
  >
    <video
      v-if="src"
      controls
      :src="src"
      :autoplay="autoplay || undefined"
      :loop="loop || undefined"
      :muted="muted || undefined"
      class="h-auto w-full rounded border"
      preload="metadata"
    />
  </div>
</template>
