<template>
  <div class="flex items-center p-4 transition-all duration-300 overflow-hidden">
    <SvgIcon 
      name="logo" 
      class="mr-3 transition-transform duration-300 hover:scale-110" 
      size="32px" 
    />
    <h1 
      v-if="!collapsed" 
      class="text-lg font-semibold m-0 whitespace-nowrap overflow-hidden text-ellipsis transition-all duration-300 hover:font-bold"
      :style="{ color: 'var(--el-text-color-primary)' }"
    >
      多人语音合成
    </h1>
  </div>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/Icon/Index.vue';

defineOptions({
  name: 'Logo'
})


defineProps({
  // 是否折叠，折叠时不显示标题
  collapsed: {
    type: Boolean,
    default: false
  }
});
</script>

<style scoped>
/* 只保留必要的样式，其他都通过 Tailwind 类实现 */
</style> 