<script setup lang="ts">
import type { IconType } from '@bagelink/vue'
import { Icon } from '@bagelink/vue'

interface Props {
	color?: 'green' | 'red' | 'blue' | 'light' | 'gray' | 'yellow'
	size?: string
	text: string
	icon?: IconType
	iconEnd?: IconType
}

defineProps<Props>()
</script>

<template>
	<div class="pill" :class="[color]">
		<Icon v-if="icon" class="inline" :icon="icon" />
		{{ text }}
		<Icon v-if="iconEnd" class="inline" :icon="iconEnd" />
	</div>
</template>

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

<style>
.pill {
	border-radius: 10px;
	padding: 4px 8px;
	font-size: 10px;
	background: var(--bgl-gray-light);
	white-space: nowrap;
	display: inline;
}

.pill.light {
	background: var(--bgl-blue-light);
	color: var(--bgl-black);
}

.pill.blue {
	background: var(bgl-primary);
	color: var(--bgl-white);
}

.pill.red {
	background-color: var(--bgl-red-tint);
	color: var(--bgl-red);
}

.pill.green {
	background-color: var(--bgl-green);
	color: var(--bgl-white);
}

.pill.orange {
	background-color: var(--bgl-yellow);
	color: var(--bgl-black);
}

.pill.yellow {
	background-color: var(--bgl-yellow-light);
	color: var(--bgl-yellow);

}

.pill.Paid,
.pill.Active {
	background-color: var(--bgl-green);
	color: white;
}

.pill.Error {
	background-color: var(--bgl-red-tint);
	color: var(--bgl-red);
}
</style>
