<script setup lang="ts">
import { computed } from 'vue';
import { useStatusPill } from '../../composables/useStatusPill';

const props = defineProps<{
    slug: string;
    label?: string;
}>();

const style = computed<Record<string, string>>(() => {
    const s = useStatusPill(props.slug);
    const css: Record<string, string> = {
        background: s.bg,
        color: s.color,
    };
    if (s.fontWeight) css['font-weight'] = String(s.fontWeight);
    if (s.textDecoration) css['text-decoration'] = s.textDecoration;
    return css;
});
</script>

<template>
    <span class="ld-status-pill" :style="style">{{ label ?? slug }}</span>
</template>

<style scoped>
.ld-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
    transition:
        background 300ms cubic-bezier(0.16, 1, 0.3, 1),
        color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
</style>
