<script lang="ts" setup>
import { ref } from 'vue';
import { useAppStore } from '@/store/modules/app';

// 国际化
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const appStore = useAppStore();

defineProps({
  collapse: {
    type: Boolean,
    required: true
  }
});

const logo = ref<string>(
  new URL(`../../../assets/logo.png`, import.meta.url).href
);
</script>

<template>
  <transition class="ml-5 bg-white-800">
    <router-link
      key="collapse"
      class="h-[50px] flex items-center justify-center"
      to="/dashboard"
    >
      <img :src="logo" style="width: 30px; height: 30px;" class="w-5 h-5" />
      <h1 class="ml-3 text-blank font-bold" :style="{fontSize: appStore.size === 'default' ? '20px' : '22px'}">{{t('login.title')}}</h1>
    </router-link>
  </transition>
</template>
