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

import { Badge } from '@/components/ui/badge'
import { useFormatters } from '@/composables/useFormatters'

const props = defineProps<{
  duration?: number
}>()

const { formatMillis } = useFormatters()

const durationFormatted = computed(() => {
  if (!props.duration) return null
  return formatMillis(props.duration)
})
</script>

<template>
  <Badge v-if="durationFormatted" variant="outline" class="text-foreground/85">
    <i class="dku-icon-clock-16 opacity-80" />
    <span class="font-mono text-[11px]">{{ durationFormatted }}</span>
  </Badge>
</template>
