<template>
  <div
    class="custom-tab-component row no-wrap bg-secondary-3"
    style="border-radius: 8px; gap: 4px"
  >
    <div
      v-for="tab in tabs"
      :key="tab.name"
      class="col flex items-center justify-center tab-item"
      :class="[
        activeTab === tab.name ? 'tab-active' : 'tab-inactive',
        tab.disable ? 'tab-disabled' : 'cursor-pointer',
      ]"
      style="height: 36px; border-radius: 6px"
      @click="!tab.disable && emit('update:activeTab', tab.name)"
    >
      <span class="text-center text-weight-medium" style="font-size: 13px">
        {{ tab.label }}
      </span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  tabs: {
    type: Array,
    required: true,
  },
  activeTab: {
    type: String,
    default: null,
  },
});

const emit = defineEmits(["update:activeTab"]);
</script>

<style scoped>
.custom-tab-component {
  position: relative;
  z-index: 1;
}

.tab-item {
  transition:
    background-color 0.2s,
    color 0.2s;
}

.tab-active {
  background-color: #ff8340;
}

.tab-inactive {
  background-color: transparent;
  color: #555;
}

.tab-inactive:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.tab-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
</style>
