<script setup lang="ts">
import AlmatyContacts from "#adata-ui/components/navigation/header/AlmatyContacts.vue";
import AstanaContacts from "#adata-ui/components/navigation/header/AstanaContacts.vue";

const props = withDefaults(
  defineProps<{
    animation?: string
    index?: number
    url?: string
  }>(),
  {
    animation: 'previous',
    index: 2,
    url:''
  }
)
defineEmits(['outerClick', 'mouseOver'])

const { t } = useI18n()
const activeTab = ref(0)
const options = [
  {
    key: 0,
    name: 'ТОО "Alldata"'
  },
  {
    key: 1,
    name: ' ТОО «ADATA Consulting»'
  },
]

</script>

<template>
  <div class=" normal-case ">
    <div class="bg-white dark:bg-gray-950">
      <transition :name="animation">
        <div
          :key="index"
          class="a-container"
        >
          <div class="pt-2 mb-8  flex justify-between">
            <a-pill-tabs
              v-model="activeTab"
              class="gap-2"
              view="mobile"
              :options="options"
              size="lg"
            />
            <nuxt-link :to="url">
              <a-button variant="gray">
                {{ t('header.contacts.toContacts') }}
                <a-icon-arrow-top-right-on-square />
              </a-button>
            </nuxt-link>
          </div>
          <div>
            <almaty-contacts v-show="activeTab===0" />
            <astana-contacts v-show="activeTab===1" />
          </div>
        </div>
      </transition>
      <button
        class="absolute right-8 top-4"
        @click="$emit('outerClick')"
      >
        <a-icon-x-mark
          width="32"
          height="32"
        />
      </button>
    </div>
  </div>
</template>

<style scoped lang="scss">
$percent: 30%;
.next-enter-from,
.next-leave-to {
  opacity: 0;
  transform: translateX($percent);
  position: absolute;
}

.next-enter-active {
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.next-leave-active {
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translateX(-$percent);
}

// Backwards transition

.prev-enter-from,
.prev-leave-to {
  position: absolute;

  opacity: 0;
  transform: translateX(-$percent);
}

.prev-enter-active {
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.prev-leave-active {
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translateX($percent);
}
</style>
