<template>
  <div class="map-switcher">
    <label class="map-switcher-label">Карта</label>
    <select
      class="form-control map-switcher-select"
      :value="modelValue"
      @change="onSelect"
    >
      <option v-for="map in maps" :key="map.id" :value="String(map.id)">
        {{ map.name }}
      </option>
    </select>
    <button type="button" class="btn btn-secondary btn-sm" @click="$emit('create')">
      + Новая
    </button>
    <button
      v-if="modelValue"
      type="button"
      class="btn btn-secondary btn-sm"
      title="Настройки карты"
      @click="$emit('manage', modelValue)"
    >
      ⚙
    </button>
  </div>
</template>

<script setup>
defineProps({
  maps: { type: Array, default: () => [] },
  modelValue: { type: String, default: '' },
})
const emit = defineEmits(['update:modelValue', 'create', 'manage'])

function onSelect(event) {
  emit('update:modelValue', event.target.value)
}
</script>

<style scoped>
.map-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.map-switcher-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.map-switcher-select {
  min-width: 160px;
  max-width: 240px;
}
</style>
