<!--
  Canonical settings toggle row (DRY pass #161): an accent icon + an uppercase
  .fc-section-h label + a right-aligned switch. Hand-rolled identically in the
  ML settings cards (HeadsCard x3, CropProposersCard, MLBackfillCard).

  Two-way binds `modelValue` (so the parent switch state stays optimistic) AND
  emits `change` with the new boolean, so the parent can persist + revert on
  failure — matching the prior `v-model` + `@update:model-value=handler` pattern.
-->
<template>
  <div class="d-flex align-center mb-1" style="gap: 10px;">
    <v-icon v-if="icon" size="18" :color="iconColor">{{ icon }}</v-icon>
    <span class="fc-section-h">{{ label }}</span>
    <v-switch
      :model-value="modelValue"
      :loading="loading"
      :disabled="disabled"
      hide-details density="compact" color="success" class="ml-auto"
      @update:model-value="onSwitch"
    />
  </div>
</template>

<script setup>
defineProps({
  modelValue: { type: Boolean, default: false },
  label: { type: String, default: '' },
  icon: { type: String, default: '' },
  // Icon tint. Default accent; pass null for the theme default (e.g. when a row
  // is off). null (not undefined) so the default doesn't override it.
  iconColor: { type: String, default: 'accent' },
  loading: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
})
const emit = defineEmits(['update:modelValue', 'change'])

function onSwitch(v) {
  const b = !!v
  emit('update:modelValue', b)
  emit('change', b)
}
</script>
