<script setup lang="ts">
/**
 * STUB props-driven reactive canvas display.
 *
 * Pending the reactive canvas runtime (which itself depends on the
 * builder counterpart).
 */
import { computed } from "vue"
import { Construction } from "@lucide/vue"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export interface ReactiveCanvasDisplayProps {
  label?: string
  classList?: string[] | string
}

const props = defineProps<ReactiveCanvasDisplayProps>()

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

<template>
  <Card
    :class="rootClass"
    data-testid="reactive-canvas-display"
  >
    <CardHeader class="flex flex-row items-center gap-3 p-4">
      <Construction class="size-5 text-muted-foreground" />
      <div class="flex-1">
        <CardTitle class="text-base">
          {{ label ?? "Reactive Canvas" }}
        </CardTitle>
        <CardDescription>
          Coming soon — reactive canvas runtime is not yet implemented.
        </CardDescription>
      </div>
      <Badge variant="secondary">
        reactive-canvas
      </Badge>
    </CardHeader>
    <CardContent class="p-4 pt-0 text-sm text-muted-foreground">
      Awaiting the reactive-canvas builder counterpart.
    </CardContent>
  </Card>
</template>
