<script setup lang="ts">
import { computed } from 'vue'
import { formatMessage } from '../lib/messages'
import type { AssistantTurn } from '../lib/models'

const props = defineProps<{ turn: AssistantTurn }>()
const parts = computed(() => {
  const values: string[] = []
  if (props.turn.candidateCount !== null) {
    values.push(formatMessage('requestMetadataCandidates', { count: props.turn.candidateCount }))
  }
  if (props.turn.completion) {
    values.push(
      formatMessage('requestMetadataVerified', { count: props.turn.completion.track_count }),
    )
    values.push(
      formatMessage('requestMetadataDuration', {
        milliseconds: props.turn.completion.total_ms,
      }),
    )
  }
  return values
})
</script>

<template>
  <p v-if="parts.length" class="metadata">{{ parts.join(' / ') }}</p>
</template>

<style scoped>
.metadata {
  margin: 0;
  color: var(--c-text-ghost);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
}
</style>
