<template>
  <div>
    <div class="page-header">
      <h2>Global Search</h2>
    </div>

    <div class="section-card">
      <div class="setting-group">
        <p class="setting-description">
          Choose which content types appear in global search results. Disabling a
          type here hides it from search without disabling the plugin elsewhere.
        </p>

        <div class="setting-row" v-for="domain in searchDomains" :key="domain.key">
          <label class="toggle-label">
            <span>{{ domain.label }}</span>
            <button
              class="toggle-btn"
              :class="{ active: searchValue(domain.key) }"
              @click="toggleSearchDomain(domain.key)"
              :disabled="saving"
            >
              <span class="toggle-slider"></span>
            </button>
          </label>
        </div>
      </div>
    </div>

    <div v-if="error" class="error-message">{{ error }}</div>
    <div v-if="success" class="settings-success">{{ success }}</div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useSystemSettings, searchDomains } from '../../composables/systemSettings'

const {
  saving, error, success,
  loadSettings, searchValue, toggleSearchDomain,
} = useSystemSettings()

onMounted(loadSettings)
</script>
