<script setup lang="ts">
import { sanitizeHtml } from "../../utils/sanitize";
import Card from "../ui/Card.vue";
import CardContent from "../ui/CardContent.vue";
import CardHeader from "../ui/CardHeader.vue";
import CardTitle from "../ui/CardTitle.vue";

defineProps<{
  data: {
    content?: string;
  };
  widget: {
    key: string;
    label: string;
    width: string;
    hideable: boolean;
  };
}>();
</script>

<template>
  <Card class="h-full">
    <CardHeader>
      <CardTitle>{{ widget.label }}</CardTitle>
    </CardHeader>
    <CardContent class="prose prose-sm max-w-none dark:prose-invert">
      <!-- eslint-disable-next-line vue/no-v-html -->
      <div v-if="data.content" v-html="sanitizeHtml(data.content)" />
      <p v-else class="text-muted-foreground">No content.</p>
    </CardContent>
  </Card>
</template>
