<!-- All active filters -->
<script setup lang="ts">
import { FiltersType } from '~src/admin/types';
import Badge from '../base/Badge.vue';
import IconClose from '../icons/IconClose.vue';
import { useGettext } from 'vue3-gettext';

// Translations
const { $gettext } = useGettext();

// Props
const { activeFilters } = defineProps<{
    activeFilters: FiltersType;
}>();

// Emits
const emit = defineEmits<{
    updateStatus: [labels: string];
    updateKeywords: [labels: string];
}>();
</script>

<template>
    <div class="flex items-center gap-5 mt-7 mb-5 flex-wrap">
        <!-- Active search -->
        <Badge size="large" v-if="activeFilters.search">
            <span>{{ activeFilters.search }}</span>
            <IconClose class="cursor-pointer" @click="activeFilters.search = ''" />
        </Badge>

        <!-- Active status -->
        <Badge size="large" v-for="(status, i) in activeFilters.status" :key="i">
            <span>{{ $gettext('Status') }}: {{ status }}</span>
            <IconClose class="cursor-pointer" @click="emit('updateStatus', status)" />
        </Badge>

        <!-- Active keywords -->
		<Badge size="large" v-for="(keyword, i) in activeFilters.keywords" :key="i">
            <span>{{ $gettext('Keyword') }}: {{ keyword }}</span>
            <IconClose class="cursor-pointer" @click="emit('updateKeywords', keyword)" />
        </Badge>
    </div>
</template>

<style scoped></style>
