<script setup lang="ts">
/**
 * Props-driven image display.
 *
 * Shows a responsive `<img>` when `src` is set, otherwise renders a
 * dashed placeholder.
 */
import { computed } from "vue"
import { ImageIcon } from "@lucide/vue"

export interface ImageDisplayProps {
  src?: string
  alt?: string
  classList?: string[] | string
}

const props = defineProps<ImageDisplayProps>()

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

<template>
  <div
    class="inline-block"
    :class="rootClass"
    data-testid="image-display"
  >
    <img
      v-if="src"
      :src="src"
      :alt="alt ?? ''"
      class="h-auto max-w-full rounded"
      loading="lazy"
    >
    <div
      v-else
      class="flex h-32 w-full items-center justify-center rounded border border-dashed bg-muted text-muted-foreground"
      data-testid="image-display-empty"
    >
      <ImageIcon class="size-6" />
    </div>
  </div>
</template>
