<template>
    <div class="flex items-center flex-1 justify-center">
        <div class="w-[25%] gap-[20px]" v-for="(step, index) in steps" :key="step.label">
            <div class="flex flex-col items-center gap-[16px]">
                <div class="flex items-center gap-[20px]">
                    <img :src="step.imagePath" style="width: 100%; height: 100%" :alt="step.label" />
                    <el-icon v-if="index < steps.length - 1" :size="24" color="#999"><ArrowRightBold /></el-icon>
                </div>
                <div class="flex items-center gap-[6px]">
                    <span class="font-bold text-[20px] text-primary">0{{ index + 1 }}</span>
                    <span class="text-[16px]">{{ step.label }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import stepOneImg from '@/assets/images/step-one.png'
const steps = shallowRef([
    { label: '新建组织', imagePath: stepOneImg },
    { label: '新建分组', imagePath: stepOneImg },
    { label: '新建账号', imagePath: stepOneImg }
])
</script>
<style scoped></style>
