<script setup lang="ts" generic="T">
defineProps<{
    rows: T[]
    rowKey: (row: T) => string | number
    hasItems: (row: T) => boolean
    labelWidth?: string
}>()
</script>

<template>
    <div class="badge-table">
        <div
            v-for="row in rows"
            :key="rowKey(row)"
            class="badge-row"
        >
            <!-- Label column: consumer provides content -->
            <div class="badge-label" :style="labelWidth ? `width: ${labelWidth}` : ''">
                <slot name="label" :row="row" />
            </div>

            <!-- Scrollable badge strip -->
            <div class="badge-scroll-container">
                <div v-if="hasItems(row)" class="badge-strip">
                    <slot name="items" :row="row" />
                </div>
                <span v-else class="badge-empty">—</span>
            </div>
        </div>
    </div>
</template>

<style scoped>
.badge-table {
    width: 100%;
    border: 1px solid var(--table-border);
    border-bottom: none;
    container-type: inline-size;
}



.badge-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--table-border);
    min-height: 2.5em;
}

.badge-label {
    flex: 0 0 auto;
    width: 15em;
    padding: 0.5em;
    border-right: 1px solid var(--table-border);
    align-self: stretch;
    display: flex;
    align-items: center;
    font-size:0.9rem;
}

@container (max-width: 480px) {
    .badge-label {
        font-size: 0.75rem;
        width: 9em;
    }
}

.badge-scroll-container {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
}

.badge-strip {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.5em;
    white-space: nowrap;
}

.badge-empty {
    padding: 0.5em;
    color: var(--muted);
}
</style>
