<script setup lang="ts">
const props = defineProps<{
  height?: number
  class?: string
  activeTab?: 1 | 2
}>()

const classVal = computed(() => {
  return props.class ? props.class : ''
})
const activeTab = ref(props.activeTab || 1)

function switchActiveTab() {
  activeTab.value = activeTab.value === 1 ? 2 : 1
}
</script>

<template>
  <div :class="`content-switcher ${classVal}`" :style="height ? `height:${200}px` : ''">
    <div class="wrapper">
      <div :class="`item item-1 ${activeTab === 1 ? 'active' : 'inactive'}`">
        <slot name="content1" />
      </div>
      <div :class="`nav border-slate-300 ${ activeTab == 1 ? 'border-l' : 'border-r'}`">
        <button @click="switchActiveTab()" class="!p-0 w-full h-full">
          <Icon :name="activeTab == 1 ? 'i-lucide-chevron-left' : 'i-lucide-chevron-right'" class="text-3xl" />
        </button>
      </div>
      <div :class="`item item-2 ${activeTab === 2 ? 'active' : 'inactive'}`">
        <slot name="content2" />
      </div>
    </div>
  </div>
</template>

<style>
  .content-switcher {
    @apply overflow-hidden
  }
  .wrapper {
    @apply flex w-[200%] h-full
  }
  .item {
    @apply w-[calc(50%-60px)]
  }

  .item-1.active {
    @apply ms-0 transition-all duration-500 ease-in-out
  }
  .item-1.inactive {
    @apply -ms-[calc(50%-60px)] transition-all duration-500 ease-in-out
  }

  .nav {
    @apply h-full w-[60px] flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
  }

</style>
