<template>
    <div v-if="hasUsage" class="tokenBadge">
    <span class="tokenBadge__item">
      <svg class="tokenBadge__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
      </svg>
      {{ inputTokens }} in
    </span>
        <span class="tokenBadge__item">
      <svg class="tokenBadge__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
      </svg>
      {{ outputTokens }} out
    </span>
    </div>
</template>

<script>
export default {
    name: 'TokenBadge',
    props: {
        usage: {
            type: Object,
            default: null
        }
    },
    computed: {
        hasUsage() {
            return this.usage && (this.usage.input_tokens || this.usage.output_tokens);
        },
        inputTokens() {
            return this.usage?.input_tokens?.toLocaleString() || '0';
        },
        outputTokens() {
            return this.usage?.output_tokens?.toLocaleString() || '0';
        }
    }
};
</script>

<style lang="less">
@import "../../../../styles/admin/elements/chat/TokenBadge.less";
</style>
