<script setup lang="ts">
import { computed } from 'vue'

import { Badge } from '@/components/ui/badge'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import type { UsageMetadata } from '@/types/trace'
import { useFormatters } from '@/composables/useFormatters'

const props = defineProps<{
  usageMetadata?: UsageMetadata
}>()

const { formatCost } = useFormatters()

const estimatedCost = computed(() => {
  const cost = props.usageMetadata?.estimatedCost
  if (cost == null || cost === 0) return null
  return cost
})
</script>

<template>
  <Tooltip v-if="estimatedCost">
    <TooltipTrigger as-child>
      <Badge variant="outline" class="text-foreground/85 h-5">
        <span class="font-mono text-[11px]">{{ formatCost(estimatedCost) }}</span>
      </Badge>
    </TooltipTrigger>
    <TooltipContent>
      <div class="grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5 leading-5">
        <span class="text-[14px] opacity-80">Estimated cost:</span>
        <span class="text-right font-mono text-[12px]">{{ formatCost(estimatedCost) }}</span>
        <span class="text-[14px] opacity-80">1k requests:</span>
        <span class="text-right font-mono text-[12px]">{{ formatCost(estimatedCost * 1000) }}</span>
      </div>
    </TooltipContent>
  </Tooltip>
</template>
