<!--
    Component: StatGroup
    Renders multiple Stat components in a row with auto-separators.
-->
<script lang="ts">
import { Stat } from '$shared/ui';
import clsx from 'clsx';
import type { ComponentProps } from 'svelte';

interface StatItem extends Partial<Pick<ComponentProps<typeof Stat>, 'variant'>> {
    label: string;
    value: string | number;
}

interface Props {
    /**
     * Stats array
     */
    stats: StatItem[];
    /**
     * CSS classes
     */
    class?: string;
}

let { stats, class: className }: Props = $props();
</script>

<div class={clsx('flex items-center gap-4', className)}>
    {#each stats as stat, i}
        <Stat
            label={stat.label}
            value={stat.value}
            variant={stat.variant}
            separator={i < stats.length - 1}
        />
    {/each}
</div>
