<script setup lang="ts">
import { computed } from 'vue'
import type { Message } from '../../types'
import DataTabs from '../data/DataTabs.vue'
import MarkdownIt from 'markdown-it'

const props = defineProps<{ message: Message }>()
const md = new MarkdownIt()

const isUser = computed(() => props.message.role === 'user')
const rendered = computed(() => md.render(props.message.content || ''))
</script>

<template>
  <div :class="['flex gap-3', isUser ? 'justify-end' : '']">
    <!-- Avatar -->
    <div v-if="!isUser" class="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center shrink-0 text-xs font-bold text-white">
      AI
    </div>

    <div :class="['max-w-3xl', isUser ? 'bg-primary-600/20 border border-primary-600/30' : 'bg-dark-800 border border-dark-700', 'rounded-xl px-4 py-3']">
      <!-- Text content -->
      <div v-if="message.content" class="prose prose-invert prose-sm max-w-none" v-html="rendered" />

      <!-- Data tabs (for messages with results) -->
      <DataTabs v-if="message.has_results" :message="message" class="mt-3" />
    </div>

    <!-- User avatar -->
    <div v-if="isUser" class="w-8 h-8 rounded-full bg-dark-600 flex items-center justify-center shrink-0 text-xs font-bold text-dark-300">
      U
    </div>
  </div>
</template>
