<script setup lang="ts">
import type { IconType, ExtendedThemeType } from '@bagelink/vue'
import { Icon } from '@bagelink/vue'
import { computed } from 'vue'
import '../styles/base-colors.css'

interface Props {
	color?: ExtendedThemeType
	text: string
	icon?: IconType
	iconEnd?: IconType
}

const props = defineProps<Props>()

const computedPairClass = computed(() => {
	const theme = props.color
	if (!theme) return 'pair-primary'
	return `pair-${theme}`
})
</script>

<template>
	<div class="bgl_badge" :class="computedPairClass">
		<Icon v-if="icon" class="inline line-height-1" size="0.5" :icon="icon" />
		{{ text }}
		<Icon v-if="iconEnd" class="inline line-height-1" size="0.5" :icon="iconEnd" />
	</div>
</template>

<style scoped>
.inline {
	display: inline;
}

.bgl_badge {
	border-radius: 10px;
	padding: 4px 8px;
	font-size: 10px;
	white-space: nowrap;
	display: inline;
	margin-inline-end: 0.25rem;
}
</style>
