<!-- SPEC: PJ2026-010405 云端控制台. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<!-- Responsibility: 使用 Lucide 图标提供 URL 驱动的视图和密度切换。 -->

<script setup lang="ts">
import type { Component } from "vue";

export interface ViewModeOption {
  value: string;
  label: string;
  icon: Component;
}
defineProps<{
  modelValue: string;
  options: ViewModeOption[];
  label?: string;
}>();
const emit = defineEmits<{ "update:modelValue": [value: string] }>();
</script>

<template>
  <div class="view-mode-switch" role="group" :aria-label="label || '显示方式'">
    <button
      v-for="option in options"
      :key="option.value"
      type="button"
      :aria-label="option.label"
      :aria-pressed="modelValue === option.value"
      :title="option.label"
      @click="emit('update:modelValue', option.value)"
    >
      <component :is="option.icon" :size="16" aria-hidden="true" />
      <span>{{ option.label }}</span>
    </button>
  </div>
</template>
