<template>
  <div
    class="back-arrow back icon fill-blue"
    :class="{ disabled: disabled }"
    @click="$emit('click')"
  >
    <SpIcon name="sp-arrow-left" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    disabled: {
      default: false,
      type: Boolean,
    },
  },
  setup(props) {
    return {
      ...props,
    };
  },
});
</script>

<style lang="scss">
.back-arrow {
  cursor: pointer;

  &.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.4;
  }
}
</style>
