<script setup lang="ts">
/**
 * Props-driven `element-display` composition. Renders a single
 * CardElement standalone (no label, no column wrapping, no card chrome
 * by default).
 *
 * Self-contained — directly mountable in any Vue app:
 *
 *   <ElementDisplayCard
 *     :element="myChartElement"
 *     :item="dataModel"
 *     title="Featured widget"
 *     show-card
 *   />
 *
 * Renders nothing when `element` is not provided — keeps a missing
 * reference from breaking the page. ID resolution happens upstream in
 * `CardRenderer`.
 */
import { computed } from "vue"
import type { CardElement } from "@/definitions/elements"
import ElementRenderer from "@/engine/ElementRenderer.vue"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export interface ElementDisplayCardProps {
  title?: string
  subtitle?: string
  showCard?: boolean
  /** Resolved element to render. */
  element?: CardElement
  /** Page-level data model passed through to the element renderer. */
  item?: Record<string, unknown>
}

const props = withDefaults(defineProps<ElementDisplayCardProps>(), {
  showCard: false,
  item: () => ({}),
})

const showChrome = computed<boolean>(() => props.showCard === true)

const hasHeader = computed<boolean>(
  () => Boolean(props.title) || Boolean(props.subtitle),
)
</script>

<template>
  <Card v-if="showChrome && element" class="flex flex-col">
    <CardHeader v-if="hasHeader">
      <CardTitle v-if="title">{{ title }}</CardTitle>
      <CardDescription v-if="subtitle">
        {{ subtitle }}
      </CardDescription>
    </CardHeader>
    <CardContent :class="[hasHeader ? '' : 'pt-6']">
      <ElementRenderer :element="element" :item="item" />
    </CardContent>
  </Card>
  <ElementRenderer
    v-else-if="element"
    :element="element"
    :item="item"
  />
</template>
