<script setup>
const props = defineProps({
    items: {
        type: Array,
        default: () => []
    },
    containerClass: {
        type: String,
        default: 'card'
    }
});
</script>

<template>
    <div :class="props.containerClass">
        <div class="flex flex-wrap items-center justify-between gap-6">
            <div v-for="(item, idx) in props.items" :key="item.key ?? idx" class="flex items-center gap-4 flex-1 min-w-[220px]">
                <div class="w-12 h-12 rounded-full flex items-center justify-center bg-surface-100 dark:bg-surface-800">
                    <i class="pi text-primary text-xl" :class="item.icon" />
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-muted-color">{{ item.label }}</span>
                    <span class="text-surface-900 dark:text-surface-0 text-xl font-semibold" :class="item.valueClass">{{ item.value }}</span>
                </div>
                <div v-if="idx !== props.items.length - 1" class="hidden xl:block w-px self-stretch bg-surface-200 dark:bg-surface-700 ml-auto"></div>
            </div>
        </div>
    </div>
</template>
