<script setup lang="ts">
import MarkdownIt from 'markdown-it'

const props = defineProps<{ content: string; status: string }>()
const md = new MarkdownIt()
</script>

<template>
  <div class="bg-dark-800 border border-dark-700 rounded-xl px-4 py-3">
    <!-- Status message -->
    <div v-if="status" class="flex items-center gap-2 text-sm text-primary-400 mb-2">
      <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
      </svg>
      {{ status }}
    </div>

    <!-- Streaming content -->
    <div v-if="content" class="prose prose-invert prose-sm max-w-none" v-html="md.render(content)" />

    <!-- Blinking cursor -->
    <span v-if="!content && !status" class="inline-block w-2 h-5 bg-primary-400 animate-pulse" />
  </div>
</template>
