<template>
  <view class="menu-list">
    <view
      v-for="item in items"
      :key="item.key"
      class="menu-item"
      @click="handleTap(item.key)"
    >
      <view class="menu-left">
        <view class="menu-icon" :style="{ background: item.bgColor }">
          <u-icon :name="item.icon" :size="22" :color="item.iconColor"></u-icon>
        </view>
        <text class="menu-text">{{ item.label }}</text>
      </view>
      <view class="menu-right">
        <text v-if="item.extra" class="menu-extra">{{ item.extra }}</text>
        <u-icon name="arrow-right" :size="16" color="#D4D4D4"></u-icon>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
interface MenuItem {
  key: string
  label: string
  icon: string
  iconColor: string
  bgColor: string
  extra?: string
}

interface Props {
  items: MenuItem[]
}

defineProps<Props>()

const emit = defineEmits<{
  (e: 'item-click', key: string): void
}>()

function handleTap(key: string) {
  emit('item-click', key)
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.menu-list {
  background: $bg-card;
  border-radius: $radius-lg;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.menu-item {
  @include flex-between;
  padding: $spacing-xl $spacing-lg;
  border-bottom: 1rpx solid $border-light;
  transition: $transition-bg;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background: $bg-hover;
  }
}

.menu-left {
  @include flex-row(flex-start, center);
  gap: $spacing-lg;
  flex: 1;
  min-width: 0;
}

.menu-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: $radius-sm;
  @include flex-center;
  flex-shrink: 0;
}

.menu-text {
  font-size: $font-base;
  color: $text-primary;
  font-weight: $font-regular;
}

.menu-right {
  @include flex-row(flex-end, center);
  gap: $spacing-xs;
  flex-shrink: 0;
}

.menu-extra {
  font-size: $font-sm;
  color: $text-tertiary;
}
</style>
