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

const activeTab = ref(props.activeTab || 1)

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

<template>
  <div class="content-switcher" :style="`height: ${height || 200}px`">
    <div :class="`${activeTab === 1 ? 'active' : 'inactive'}`">
      <div class="content-wrapper">
        <div>
          <slot name="content1" />
        </div>
      </div>
      <div class="content-nav">
        <button @click="handleClick(1)">
          <Icon name="i-lucide-chevron-right" />
        </button>
      </div>
    </div>
    <div :class="`${activeTab === 2 ? 'active' : 'inactive'}`">
      <div class="content-nav">
        <button @click="handleClick(2)">
          <Icon name="i-lucide-chevron-left" />
        </button>
      </div>
      <div class="content-wrapper">
        <div>
          <slot name="content2" />
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  .content-switcher {
    @apply flex overflow-hidden gap-3
  }
  .content-switcher > * {
    @apply border border-slate-300 rounded-md flex overflow-hidden
  }

  .content-wrapper {
    @apply p-4 2xl:p-5 overflow-hidden grow
  }
  .inactive .content-wrapper {
    @apply p-0 w-0
  }

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

  .content-nav button {
    @apply pt-2 px-2 h-full w-full
  }

  /* .content-switcher .inactive > .content-wrapper {
    @apply w-0 p-0 opacity-0 transition-all duration-500 ease-in-out
  } */
  .content-switcher .inactive {
    @apply w-16 transition-all duration-500 ease-in-out
  }
  .content-switcher .inactive > .content-nav {
    @apply w-full transition-all duration-100 ease-in-out
  }

  .content-switcher .active {
    @apply grow transition-all duration-500 ease-in-out
  }
  .content-switcher .active > .content-nav {
    @apply w-0 transition-all duration-100 ease-in-out
  }
  /* .content-switcher .active > .content-wrapper {
    @apply w-full delay-1000 transition-all duration-1000 ease-in-out
  } */

</style>
