<template>
  <div @click="onClick" class="mr-2 py-1 inline text-gray-500" hover:bg="white op-10">
    <slot>
      <carbon:arrow-left v-if="props.arrow === 'left'" />
      <carbon:arrow-right v-else-if="props.arrow === 'right'" />
      <carbon:arrow-up v-else-if="props.arrow === 'up'" />
      <carbon:arrow-down v-else-if="props.arrow === 'down'" />
      <carbon:arrow-left v-else />
    </slot>
  </div>
</template>
<script setup lang="ts">
import { useSlideContext } from '@slidev/client';

const { $slidev } = useSlideContext();
const props = defineProps({
  go: {
    default: 1,
  },
  arrow: {
    type: String,
    default: 'left', // 'left', 'right', 'up', or 'down'
  },
});
const onClick = () => {
  const go = props.go;
  if (go <= 0) {
    $slidev.nav.go(1);
    return;
  }

  $slidev.nav.go(go);
};
</script>
