  <!--
    站点 Logo 展示：优先显示图片，无 URL 或加载失败时回退为站点名称首字母。
    用于 layout、login、register 等页面；src 不传则使用 siteStore.siteLogo。
  -->
  <template>
    <img
      v-if="showSiteLogoImg"
      :src="siteLogo"
      :class="imgClass"
      alt="Logo"
      @error="handleLogoError"
    />
    <div v-else :class="iconClass" :style="iconStyle">{{ fallbackLetter }}</div>
  </template>

  <script setup lang="ts">
  import { useSiteLogo } from '@/composables/useSiteLogo'

  const props = withDefaults(defineProps<{
    /** 自定义 Logo 地址，默认取 siteStore.siteLogo */
    src?: string
    /** 图片模式下的 class */
    imgClass?: string
    /** 首字母 fallback 模式下的 class */
    iconClass?: string
    /** 首字母 fallback 的内联样式 */
    iconStyle?: Record<string, string>
  }>(), {
  imgClass: 'logo-img',
  iconClass: 'logo-icon',
})

const { siteLogo, showSiteLogoImg, fallbackLetter, handleLogoError } = useSiteLogo(
  () => props.src
)
</script>
