<script setup>
import { computed } from 'vue';

const $props = defineProps({
    item: {
        type: Object,
        required: true,
    },
    tag: {
        type: String,
        required: false,
        default: 'tag',
    },
    value: {
        type: String,
        required: false,
        default: 'value',
    },
});
const tags = computed(() => {
    return Object.keys($props.item)
        .filter((i) => i.startsWith(`${$props.tag}`))
        .reduce((acc, tag) => {
            const n = tag.split(`${$props.tag}`)[1];
            const key = `${$props.tag}${n}`;
            const value = `${$props.value}${n}`;
            acc[$props.item[key] ?? key] = $props.item[value] ?? '';
            return acc;
        }, {});
});
</script>
<template>
    <div class="fetchedTags">
        <div class="wrap">
            <div
                v-for="(val, key) in tags"
                :key="key"
                class="inline-tag"
                :title="`${key}: ${val}`"
                :class="{ empty: !val }"
            >
                {{ val }}
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.fetchedTags {
    align-items: center;
    .wrap {
        width: 100%;
        flex-wrap: wrap;
        display: flex;
    }

    .inline-tag {
        height: 1rem;
        margin: 0.05rem;
        color: $color-font-secondary;
        text-align: center;
        font-size: smaller;
        padding: 1px;
        flex: 1;
        border: 1px solid $color-spacer;
        text-overflow: ellipsis;
        overflow: hidden;
        min-width: 4rem;
        max-width: 4rem;
    }
    .empty {
        border: 1px solid #2b2b2b;
    }
}
</style>
