<template>
  <view class="menu-section">
    <view
      class="menu-item"
      hover-class="menu-item-hover"
      v-for="item in items"
      :key="item.label"
      @tap="$emit('select', item)"
    >
      <text class="item-text" :class="{ highlight: item.highlight }">{{ item.label }}</text>
      <text class="arrow">›</text>
    </view>
  </view>
</template>

<script setup lang="ts">
export interface ProfileMenuItem {
  label: string;
  route?: string;
  action?: string;
  highlight?: boolean;
}

defineEmits(["select"]);

defineProps({
  items: {
    type: Array as () => ProfileMenuItem[],
    required: true,
  },
});
</script>

<style scoped>
.menu-section {
  width: 100%;
  margin-bottom: 22rpx;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(247, 252, 255, 0.62)),
    rgba(255, 255, 255, 0.7);
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 26rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 16rpx 36rpx rgba(93, 107, 139, 0.07);
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 92rpx;
  padding: 0 26rpx;
  border-bottom: 1rpx solid rgba(230, 236, 246, 0.72);
  transition: background-color 0.2s;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item-hover {
  background-color: rgba(255, 255, 255, 0.54);
}

.item-text {
  font-size: 28rpx;
  color: #263044;
  font-weight: 600;
}

.highlight {
  color: #d94f75;
  font-weight: 700;
}

.arrow {
  color: #a7b0bf;
  font-size: 42rpx;
  font-weight: 300;
}
</style>
