<template>
  <view class="speed-control">
    <view class="speed-button" @click="toggleMenu">
      <text class="speed-text">{{ currentRate }}x</text>
      <text class="arrow">▼</text>
    </view>

    <view v-if="showMenu" class="speed-menu">
      <view
        v-for="rate in rateOptions"
        :key="rate"
        class="speed-option"
        :class="{ active: rate === currentRate }"
        @click="selectRate(rate)"
      >
        {{ rate }}x
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  rate: number
}

const props = withDefaults(defineProps<Props>(), {
  rate: 1.0
})

const emit = defineEmits<{
  change: [rate: number]
}>()

const rateOptions = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0]
const showMenu = ref(false)
const currentRate = ref(props.rate)

watch(
  () => props.rate,
  (newRate) => {
    currentRate.value = newRate
  }
)

const toggleMenu = () => {
  showMenu.value = !showMenu.value
}

const selectRate = (rate: number) => {
  currentRate.value = rate
  showMenu.value = false
  emit('change', rate)
}
</script>

<style lang="scss" scoped>
.speed-control {
  position: relative;
}

.speed-button {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 10rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8rpx;
  cursor: pointer;
  user-select: none;

  &:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

.speed-text {
  color: #fff;
  font-size: 24rpx;
}

.arrow {
  color: #fff;
  font-size: 20rpx;
}

.speed-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10rpx;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 8rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
}

.speed-option {
  padding: 20rpx 40rpx;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  &.active {
    color: #1989fa;
    background-color: rgba(25, 137, 250, 0.1);
  }

  &:not(:last-child) {
    border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
  }
}
</style>
