<script setup lang="ts">
defineProps<{
    label: string;
    count?: number;
    active?: boolean;
}>();

defineEmits<{ click: [] }>();
</script>

<template>
    <button type="button" class="ld-filter-chip" :class="{ 'ld-filter-chip--active': active }" @click="$emit('click')">
        <span>{{ label }}</span>
        <span v-if="count && count > 0" class="ld-filter-chip__count">{{ count }}</span>
        <span class="ld-filter-chip__caret">▾</span>
    </button>
</template>

<style scoped>
.ld-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius-8);
    background: var(--liderra-surface);
    border: 1px solid var(--liderra-line);
    font-size: 12px;
    color: var(--liderra-noir);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ld-filter-chip:hover {
    border-color: var(--liderra-line-strong);
}
.ld-filter-chip--active {
    border-color: var(--liderra-teal);
    background: rgba(15, 110, 86, 0.06);
    color: var(--liderra-teal);
}
.ld-filter-chip__count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: rgba(15, 110, 86, 0.12);
    color: var(--liderra-teal);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
}
.ld-filter-chip__caret {
    font-size: 9px;
    opacity: 0.6;
}
</style>
