<template>
  <div class="tabs">
    <div
      class="tab"
      v-for="(tab, index) in tabs"
      :key="index"
      :class="{ active: index === activeTab }"
      @click="handactiveTab(index)"
    >
      <div><img class="icon" :src="getTabIcon(index)" alt="Tab" /></div>
      <div class="text">{{ tab }}</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps([
  "listred",
  "listblack",
  "activeTab",
  "tabs",
  "getTabIcon",
]);
const emit = defineEmits(["getTabIcon", "handactiveTab"]);

function handactiveTab(index) {
  emit("handactiveTab", index);
}
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  z-index: 10;
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  flex-direction: column;
  background: none;
  color: #000101;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 24px;
  margin-right: 40px;
  width: 96px;
  height: 96px;
  img {
    width: 45px;
    height: 45px;
  }
}

.tab .icon {
  // margin-right: 40px;
  // width: 120px;
  // height: 120px;
}
.icon::after{
  content: '';
  background: url(../../assets);
}

.tab .text {
  margin-top: 30px;
  // margin-right: 10px;
}

.tab .active-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tab.active {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  flex-direction: column;
  background: none;
  color: #000101;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 24px;
  margin-right: 40px;
  width: 96px;
  height: 96px;
  color: #DC5C7F;
  img {
    width: 45px;
    height: 45px;
  }
}
.tab.active::before {
  content: "";
  position: absolute;
  left: 0px;
  top: -28px;
  background: url("../../assets/img/home/tabs/ring.png") no-repeat;
  background-size: contain;
  width: 96px;
  height: 96px;

}
</style>
