<script setup lang="ts">
// Fond de page unifié : Blanc / Teinté (aplat clair fixe) / Plein (couleur du
// filet/bandeau de la page). Undefined = Blanc par défaut.
import type { Background, BgMode } from '~~/types'

const model = defineModel<Background | undefined>()

const modes = [
  { value: 'white', label: 'Blanc' },
  { value: 'tint', label: 'Teinté' },
  { value: 'full', label: 'Plein' },
] as const

const current = computed<BgMode>(() => model.value?.mode ?? 'white')
</script>

<template>
  <div class="space-y-2">
    <p class="text-xs font-medium uppercase tracking-wide text-neutral-500">Fond</p>
    <div class="flex gap-1">
      <UButton
        v-for="m in modes"
        :key="m.value"
        :label="m.label"
        size="xs"
        :variant="current === m.value ? 'solid' : 'outline'"
        color="neutral"
        @click="model = { mode: m.value }"
      />
    </div>
  </div>
</template>
