<script setup lang="ts">
import img_header_switch from '~/assets/img/header_switch.png'
const props = defineProps<{
  to: string
}>()
const router = useRouter()

function routerReplace(path: string) {
  router.replace(path)
}
const route = useRoute()
</script>

<template>
  <div
    class="w-312px cursor-pointer hovered" :class="{ active: route.path === props.to }"
    @click="routerReplace(props.to)"
  >
    <div class="w-full flex_center text-xl tracking-wider">
      <slot />
    </div>
    <div class="w-full -mt-2 h-36px ">
      <img class="w-full switched hidden" :src="img_header_switch">
    </div>
  </div>
</template>

<style scoped>
.hovered:hover .switched {
  display: block;
  opacity: .8;
}

.active .switched {
  display: block;
}
</style>
