<template>
  <button
    type="button"
    aria-label="返回"
    class="absolute -left-12 top-2 z-10 flex flex-col items-center bg-white rounded-lg shadow-md shadow-black/6 border border-gray-100 cursor-pointer hover:shadow-lg hover:border-indigo-200 transition-all duration-300 group w-9 h-9 hover:h-18 overflow-hidden p-0"
    @click="handleBack"
  >
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="w-4.5 h-4.5 shrink-0 mt-2.25 text-gray-400 group-hover:text-indigo-500 transition-colors duration-200"
    >
      <polyline points="15 18 9 12 15 6" />
    </svg>
    <span
      class="text-12px text-indigo-500 whitespace-nowrap opacity-0 group-hover:opacity-100 translate-y-(-1) group-hover:translate-y-0 transition-all duration-300 mt-1.5 tracking-[0.3em] leading-relaxed writing-vertical"
    >
      返回
    </span>
  </button>
</template>

<script setup lang="ts">
const { backHomePage = false } = defineProps<{
  backHomePage?: boolean
}>()
const router = useRouter()

const handleBack = () => {
  if (backHomePage) return router.push('/')

  if (window.history.length > 1) {
    router.back()
  } else {
    router.push('/')
  }
}
</script>

<style scoped>
.writing-vertical {
  writing-mode: vertical-rl;
}
</style>
