<script setup lang="ts">
import { computed } from 'vue';
import modeSwitchIcon from '../assets/mode-switch-icon.svg';

const props = withDefaults(defineProps<{
  /**
   * 是否开启动画模式
   */
  value: boolean;
  
  /**
   * 客户端类型
   */
  clientType?: 'pc' | 'ipad' | 'mobile';
}>(), {
  clientType: 'pc'
});

const emit = defineEmits<{
  change: [value: boolean];
}>();

// 根据 clientType 计算组件大小类
const sizeClass = computed(() => {
  return `cf-mode-switch--${props.clientType}`;
});

// 切换模式
const toggleMode = () => {
  emit('change', !props.value);
};

// 显示的文本
const modeText = computed(() => {
  return props.value ? '动画模式' : '普通模式';
});
</script>

<template>
  <button
    class="cf-mode-switch"
    :class="sizeClass"
    @click="toggleMode"
  >
    <img :src="modeSwitchIcon" alt="mode switch" class="cf-mode-switch__icon" />
    <span class="cf-mode-switch__text">{{ modeText }}</span>
  </button>
</template>

<style scoped>
.cf-mode-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    outline: none;
    background: rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(10px);
    color: white;
}

.cf-mode-switch:hover {
    background: rgba(0, 0, 0, 0.40);
}

.cf-mode-switch__icon {
    display: block;
    flex-shrink: 0;
}

.cf-mode-switch__text {
    white-space: nowrap;
}

/* PC 尺寸 */
.cf-mode-switch--pc {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 16px;
    gap: 4px;
}

.cf-mode-switch--pc .cf-mode-switch__icon {
    width: 16px;
    height: 16px;
}

/* iPad 尺寸 */
.cf-mode-switch--ipad {
    padding: 10px 20px;
    font-size: 18px;
    line-height: 28px;
    gap: 8px;
}

.cf-mode-switch--ipad .cf-mode-switch__icon {
    width: 24px;
    height: 24px;
}

/* Mobile 尺寸 */
.cf-mode-switch--mobile {
    padding: 10px 20px;
    font-size: 18px;
    line-height: 28px;
    gap: 8px;
}

.cf-mode-switch--mobile .cf-mode-switch__icon {
    width: 24px;
    height: 24px;
}
</style>
