<script lang="ts" setup="">
import {useGoBackOrHome} from "~/composables/useGoBackOrHome";

const router = useRouter()
const {goBack, canGoBack} = useGoBackOrHome()
const onClickBack = () => {
  if (canGoBack.value) {
    goBack()
    return
  }
  router.push('/')
}
</script>

<template>
  <button type="button" class="button"  @click="onClickBack">
    <IconsIconArrowLeft class="icon"/>
    <span class="text" >Назад</span>
  </button>
</template>

<style scoped lang="scss">
.button {
  display: flex;
  gap: 12px;
  align-items: center;
  background: none;
  cursor: pointer;
  color: var(--text-black);
  transition: all .3s ease;

  &:hover {
    color: var(--text-blue);
  }
}
.icon {
  @include mixins.square(24px);
}

.text {
  font-family: FuturaPT, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
}

</style>
