<!-- Steps component -->
<script setup lang="ts">
import { StepType } from '~src/admin/types';

// Props with default values
const { steps } = defineProps<{
    steps: StepType[];
    activeIndex: number;
}>();
</script>

<template>
    <!-- Steps wrapper -->
    <div class="w-full flex gap-1 md:gap-3">
        <!-- Step -->
        <div v-for="(step, i) in steps" :key="i" :class="[Number(i) !== Number(steps.length - 1) && 'flex-1']">
            <div class="flex gap-1 md:gap-3">
                <div class="text-center flex-shrink-0">
                    <!-- Step number -->
                    <span
                        :class="[
                            'inline-grid place-items-center text-base-300 border-neutral-300 bg-neutral-100 border mb-2 size-6 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2',
                            activeIndex === i && '!bg-primary-500 border-primary-500 text-white',
                            i < activeIndex && 'text-primary-500 bg-primary-50 border-primary-100 hover:cursor-pointer',
                        ]"
                        @click="i < activeIndex && step.callback()"
                        @keypress.enter.space="i < activeIndex && step.callback()"
                        :tabindex="i <= activeIndex && '0'"
                    >
                        {{ i + 1 }}
                    </span>
                    <p class="max-md:max-w-[50px]">{{ step.label }}</p>
                </div>

                <!-- Step separator -->
                <span
                    :class="[
                        'inline-block w-full h-px bg-neutral-500 mt-[11px] transition-colors',
                        i < activeIndex && '!bg-primary-500',
                    ]"
                    v-if="Number(i) !== Number(steps.length - 1)"
                ></span>
            </div>

            <!-- Step description -->
            <p class="text-xs leading-xs text-base-200 mt-1" v-if="step.description">{{ step.description }}</p>
        </div>
        <!-- Step -->
    </div>
    <!-- Steps wrapper -->
</template>

<style scoped></style>
