<script setup lang="ts">
interface Props {
  collapsed?: boolean
}

withDefaults(defineProps<Props>(), {
  collapsed: false
})
</script>

<template>
  <transition name="fade">
    <img
      v-if="collapsed"
      src="/logo.png"
      alt="LastWebNovel logo"
      class="h-8 w-8"
    >
  </transition>

  <transition name="fade">
    <div v-if="!collapsed" class="flex flex-col gap-0 px-4 py-2">
      <span class="text-lg font-bold text-gray-900 dark:text-white" style="font-family: 'Caveat', cursive; font-weight: 700;">LastWebNovel</span>
      <span class="text-xs text-gray-500 dark:text-gray-400">Your Web Novel Hub</span>
    </div>
  </transition>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>
