<script setup lang="ts">
import { globalBack } from '@/router'
import { px2vw } from '@/utils'
import { useRoute } from 'vue-router'

const props = withDefaults(
  defineProps<{
    leftText?: any
    index?: boolean
    iconSize?: number
    titleSize?: number
    gap?: number
    showOnly?: boolean
  }>(),
  {
    leftText: '',
    index: false,
    iconSize: 80,
    gap: 24,
    showOnly: false,
  },
)
const emits = defineEmits(['back'])

const route = useRoute()
const gapString = px2vw(props.gap)

function onLeftClick() {
  if (props.showOnly) return
  emits('back')

  globalBack(props.index)
}
</script>

<template>
  <nav v-if="!route.meta?.hiddenBack" class="pointer" @click="onLeftClick">
    <Icon name="left_arrow" :size="iconSize"></Icon>
    <LineFont v-if="leftText" :text="leftText" :size="titleSize" />
  </nav>
  <LineFont v-else-if="leftText" :text="leftText" :size="titleSize" />
</template>

<style lang="scss" scoped>
nav {
  display: flex;
  align-items: center;
  width: max-content;
  .x-icon {
    margin-right: v-bind(gapString);
  }
}
</style>
