<template>
  <div class="inline-flex rounded-lg border border-zinc-800 bg-zinc-950/40 p-0.5">
    <button
      v-for="opt in options"
      :key="opt.value"
      type="button"
      class="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/70"
      :class="opt.value === modelValue ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200'"
      :aria-pressed="opt.value === modelValue"
      @click="emit('update:modelValue', opt.value)"
    >
      <component :is="opt.icon" v-if="opt.icon" :size="15" />
      <span v-if="opt.label">{{ opt.label }}</span>
    </button>
  </div>
</template>

<script setup lang="ts">
// Bascule segmentée (ex. liste / grille) : remplace le toggle bricolé inline.
import type { Component } from 'vue';

export interface SegmentOption {
  value: string;
  label?: string;
  icon?: Component;
}

defineProps<{ modelValue: string; options: SegmentOption[] }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>
