<template>
  <div class="auth-logo" :class="{ 'logo-link': to }">
    <router-link v-if="to" :to="to" class="logo-inner">
      <img src="@/assets/images/logo.png" alt="logo" />
      <span v-if="showText" class="logo-text"><slot /></span>
    </router-link>
    <div v-else class="logo-inner">
      <img src="@/assets/images/logo.png" alt="logo" />
      <span v-if="showText" class="logo-text"><slot /></span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  to: {
    type: [String, Object],
    default: ''
  },
  showText: {
    type: Boolean,
    default: true
  }
})
</script>

<style lang="scss" scoped>
.auth-logo {
  position: fixed;
  top: 20px;
  left: 30px;
  z-index: 100;
  
  .logo-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    
    img {
      height: 45px;
    }
    
    .logo-text {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }
}

.logo-link {
  .logo-inner {
    transition: opacity 0.3s;
    
    &:hover {
      opacity: 0.8;
    }
  }
}
</style>
