<template>
  <div
    class="flex flex-1 flex-row mt-[28px] justify-end mobile:justify-center items-center"
    :class="className"
  >
    <div
      class="h-[24px] w-[24px] desktop:mr-[6px] mobile:mr-[38px] base-structure"
    >
      <el-icon :color="'#FFFFFF'" :size="10"><ArrowLeftBold /></el-icon>
    </div>
    <div class="h-[24px] px-[8px] base-structure">
      <span class="text-[12px] font-medium text-white">{{ current }}</span>
    </div>
    <div
      class="h-[24px] w-[24px] desktop:ml-[6px] mobile:ml-[38px] base-structure"
    >
      <el-icon :color="'#FFFFFF'" :size="10"><ArrowRightBold /></el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
defineProps({
  current: String,
  className: String,
})
</script>

<style scoped>
.base-structure {
  @apply flex justify-center items-center bg-black-3B3B3C rounded-[4px];
}
</style>
