<script setup lang="ts">
import { QuestionFilled } from '@element-plus/icons-vue';
import { useGuideTour } from '@/hooks/useGuideTour';

const { startHeaderTour } = useGuideTour();

// 开始引导教程
function handleStartTutorial() {
  startHeaderTour();
}
</script>

<template>
  <div class="tutorial-btn-container" data-tour="tutorial-btn">
    <div
      class="tutorial-btn"
      @click="handleStartTutorial"
    >
      <!-- PC端显示文字 -->
      <span class="pc-text">新手引导</span>
      <!-- 移动端显示图标 -->
      <el-icon class="mobile-icon" :size="20">
        <QuestionFilled />
      </el-icon>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tutorial-btn-container {
  display: flex;
  align-items: center;

  .tutorial-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    color: #409eff;
    transition: all 0.2s;

    &:hover {
      color: #66b1ff;
      transform: translateY(-1px);
    }

    // PC端显示文字，隐藏图标
    .pc-text {
      display: inline;
      margin: 0 12px;
    }

    .mobile-icon {
      display: none;
    }
  }
}

// 移动端显示图标，隐藏文字
@media (max-width: 768px) {
  .tutorial-btn-container {
    .tutorial-btn {
      .pc-text {
        display: none;
      }

      .mobile-icon {
        display: inline;
      }
    }
  }
}
</style>
