<script setup lang="ts">
defineOptions({ name: 'ProjectSettingAnchorNav' });

interface ProjectSettingAnchorItem {
  key: string;
  label: string;
}

interface Props {
  items: readonly ProjectSettingAnchorItem[];
  activeKey: string;
}

interface Emits {
  (e: 'select', key: string): void;
}

defineProps<Props>();
const emit = defineEmits<Emits>();
</script>

<template>
  <div class="project-setting-anchor-nav">
    <div class="project-setting-anchor-nav__title">设置目录</div>
    <div class="project-setting-anchor-nav__list">
      <button
        v-for="item in items"
        :key="item.key"
        type="button"
        class="project-setting-anchor-nav__item"
        :class="{ 'is-active': item.key === activeKey }"
        @click="emit('select', item.key)"
      >
        {{ item.label }}
      </button>
    </div>
  </div>
</template>

<style scoped>
.project-setting-anchor-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-setting-anchor-nav__title {
  color: rgb(15 23 42 / 94%);
  font-size: 15px;
  font-weight: 700;
}

.project-setting-anchor-nav__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.project-setting-anchor-nav__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgb(226 232 240 / 92%);
  border-radius: 14px;
  background-color: rgb(248 250 252 / 96%);
  color: rgb(71 85 105 / 94%);
  font-size: 14px;
  text-align: left;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.project-setting-anchor-nav__item:hover {
  transform: translateY(-1px);
  border-color: rgb(148 163 184 / 56%);
}

.project-setting-anchor-nav__item.is-active {
  border-color: rgb(13 148 136 / 42%);
  background-color: rgb(240 253 250 / 98%);
  color: rgb(15 118 110 / 96%);
  font-weight: 600;
}
</style>
