<script setup>
import { list as buttonList } from './list'
defineProps(['mapIdx'])
const emit = defineEmits(['handleMapIcon'])
</script>
<template>
  <Teleport to="body">
    <div class="control-area">
      <div class="map-control-wrapper animate__fast animate__animated animate__fadeInUp">
        <div class="map-item" @click="emit('handleMapIcon', item, index)" v-for="(item, index) of buttonList" :key="item.name">
          <img :src="mapIdx === index ? item.iconActive : item.icon" alt="" class="map-icon" />
          <span class="map-name">{{ switchLanguage(item, 'name') }}</span>
        </div>
      </div>
      <img src="../../assets/images/map/hands.svg" alt="" class="hands" />
    </div>
  </Teleport>
</template>
<style lang="scss" scoped>
.control-area {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 104px;
  left: 68px;
  top: 952px;
  z-index: 51;

  .hands {
    position: fixed;
    top: 408px;
    left: 68px;
    width: 246px;
    height: 80px;
    z-index: 51;
  }
}
.map-control-wrapper {
  display: flex;
}
.map-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
}
.map-icon {
  margin-bottom: 8px;
  width: 52px;
}
.map-name {
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
}
@media (min-aspect-ratio: 1/1) {
  .shop-list-wrapper {
    width: 510px;
    height: calc(100vh - 280px);
    right: 0px;
    bottom: 0;
    left: auto;
    top: auto;
    .switch {
      top: 24px;
    }
    .shop-scroll {
      height: 100%;
      margin-left: 54px;
    }
  }
  .control-area {
    left: 68px;
    bottom: 40px;
    right: auto;
    top: auto;
    height: auto;
    .hands {
      top: 280px;
      left: 68px;
      right: auto;
    }
  }
}
</style>
