<script setup lang="ts">
withDefaults(defineProps<{
  src?: string
  name?: string
  englishName?: string
}>(), {
  src: '/images/brand-mark-v2.png',
  name: '慧遇书院',
  englishName: 'HUIYU ACADEMY',
})
</script>

<template>
  <NuxtLink to="/" class="brand-logo" :aria-label="`返回${name}首页`">
    <img :src="src" :alt="name">
    <span class="brand-logo-copy"><strong>{{ name }}</strong><small v-if="englishName">{{ englishName }}</small></span>
  </NuxtLink>
</template>

<style scoped>
.brand-logo {
  display: inline-flex;
  align-items: center;
}

.brand-logo img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.brand-logo-copy { display: grid; margin-left: 10px; line-height: 1; white-space: nowrap; }
.brand-logo-copy strong { font: 600 23px/1.15 var(--serif); letter-spacing: .08em; }
.brand-logo-copy small { margin-top: 3px; font-size: 8px; letter-spacing: .12em; }

@media (max-width: 720px) {
  .brand-logo img { width: 38px; height: 38px; }
  .brand-logo-copy { margin-left: 8px; }
  .brand-logo-copy strong { font-size: 18px; }
  .brand-logo-copy small { font-size: 7px; }
}
</style>
