<script setup lang="ts">
export type Direction = "right" | "left";

const emit = defineEmits(["click"]);

const props = defineProps<{
  direction: Direction;
}>();
</script>

<template>
  <transition
    leave-active-class="transition ease-out duration-600"
    leave-from-class="opacity-100"
    leave-to-class="opacity-0"
    enter-active-class="transition ease-in duration-600"
    enter-from-class="opacity-0"
    enter-to-class="opacity-100"
  >
    <button
      class="absolute h-full w-32 from-white"
      :class="
        props.direction === 'right'
          ? 'right-0 bg-gradient-to-l'
          : 'left-0 bg-gradient-to-r'
      "
      @click="emit('click')"
    >
      <div
        class="flex flex-col"
        :class="props.direction === 'right' ? 'items-end' : 'items-start'"
      >
        <component
          :is="`it-icon-arrow-${props.direction}`"
          class="mb-16 h-20 w-20 text-gray-600"
        ></component>
      </div>
    </button>
  </transition>
</template>
