<template>
  <a @click.prevent="clickBackButton"><ArrowLeft /><slot>Retour</slot></a>
</template>

<script setup lang="ts">
import { ArrowLeft } from 'lucide-vue-next';
import { RouteLocationRaw } from 'vue-router';
import { useRouterHistory } from '@/plugins/router-history/router-history.composable';

const { goBack } = useRouterHistory();

const props = defineProps<{
  fallback?: RouteLocationRaw;
}>();

const clickBackButton = async () => {
  await goBack(props.fallback);
};
</script>

<style lang="scss" scoped>
a {
  cursor: pointer;
  display: inline-flex;
  gap: 0.5em;
  align-items: center;

  &:not(:hover) {
    text-decoration: underline;
  }

  svg {
    font-size: inherit;
    width: 1em;
    height: 1em;
  }
}
</style>
