<script setup lang="ts">
/**
 * Props-driven raw HTML display.
 *
 * SECURITY: the caller is responsible for trusting the source of
 * `value`. The wrapping `<div>` provides a styling boundary but does
 * not sanitise the markup. Pair with a server-side sanitiser when
 * accepting user input.
 */
import { computed } from "vue"

export interface HtmlDisplayProps {
  value?: string | number | null
  classList?: string[] | string
}

const props = defineProps<HtmlDisplayProps>()

const content = computed<string>(() => {
  if (props.value === undefined || props.value === null) {
    return ""
  }
  return String(props.value)
})

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

<template>
  <div
    class="gxp-html-display"
    :class="rootClass"
    data-testid="html-display"
    v-html="content"
  />
</template>
