<script setup lang="ts">
    import { computed } from 'vue';

    const props = withDefaults(
        defineProps<{
            count: number;
            activeStep: number;
            color?: string;
        }>(),
        {
            color: '#047BEF',
        },
    );

    const emit = defineEmits<{
        click: [index: number];
    }>();

    const steps = computed(() => Array.from({ length: props.count }, (_, i) => i + 1));

    const isActive = (step: number) => step <= props.activeStep;
</script>

<template>
    <div class="ui-steps">
        <template v-for="(step, i) in steps" :key="step">
            <button
                class="ui-steps__item"
                :class="{ '--active': isActive(step) }"
                @click="emit('click', step)"
            >
                {{ step }}
            </button>
            <div v-if="i < steps.length - 1" class="ui-steps__line" />
        </template>
    </div>
</template>

<style scoped lang="scss">
    @use '@/UI-kit/assets/scss/mixins/index.mixin';

    .ui-steps {
        @include index.flex(row, 0, center, flex-start);

        background: transparent;

        &__item {
            @include index.flex(row, 0, center, center);
            @include index.text(12px, 500, 1);

            flex-shrink: 0;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid v-bind(color);
            background: transparent;
            color: v-bind(color);
            cursor: pointer;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            transition:
                background 0.2s,
                color 0.2s;

            &.--active {
                background: v-bind(color);
                color: #fff;
            }
        }

        &__line {
            flex: 1;
            height: 1px;
            min-width: 16px;
            margin: 0 10px;
            background: v-bind(color);
        }
    }
</style>
