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

export type MacroType = 'protein' | 'carbs' | 'fat' | 'fiber'

const props = defineProps<{
	macro: MacroType
	label: string
	grams: number
}>()

const formattedGrams = computed(() => {
	if (!Number.isFinite(props.grams)) {
		return '0'
	}

	return props.grams.toLocaleString(undefined, {
		minimumFractionDigits: 0,
		maximumFractionDigits: 2,
	})
})
</script>

<template>
	<span :class="['macro-badge', `macro-badge--${macro}`]">
		<span>{{ label }}</span>
		<strong class="macro-badge__value">{{ formattedGrams }}g</strong>
	</span>
</template>
