<script setup>
const props = defineProps({ flags: { type: Object, required: true } })
const emit = defineEmits(['update:flags'])

const set = (key, val) => emit('update:flags', { ...props.flags, [key]: val })
</script>

<template>
  <div class="grid grid-cols-2 gap-3">
    <label class="ascii-label">
      Width
      <input class="ascii-input" type="number" min="1" :value="flags.width"
        @input="set('width', $event.target.value)" placeholder="auto" />
    </label>
    <label class="ascii-label">
      Height
      <input class="ascii-input" type="number" min="1" :value="flags.height"
        @input="set('height', $event.target.value)" placeholder="auto" />
    </label>
    <label class="ascii-label">
      Threshold (0–255)
      <input class="ascii-input" type="number" min="0" max="255" :value="flags.threshold"
        @input="set('threshold', $event.target.value)" placeholder="128" />
    </label>
    <div class="ascii-label justify-center gap-3 flex-row items-center col-span-2">
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" :checked="flags.color"
          @change="set('color', $event.target.checked)"
          style="accent-color: var(--ascii-green)" />
        Color
      </label>
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" :checked="flags.braille"
          @change="set('braille', $event.target.checked)"
          style="accent-color: var(--ascii-green)" />
        Braille
      </label>
    </div>
  </div>
</template>
