<script setup lang="ts">
const modelValue = defineModel<boolean | null>()

const props = defineProps<{
  title: string
  trueLabel?: string
  falseLabel?: string
}>()

function select(value: boolean) {
  modelValue.value = value
}
</script>

<template>
  <section class="boolean-section" aria-labelledby="boolean-title" role="radiogroup">
    <h2 id="boolean-title">{{ props.title }}</h2>
    <div class="grid">
      <button
        type="button"
        class="choice-btn"
        :class="{ active: modelValue === true }"
        role="radio"
        :aria-checked="modelValue === true"
        @click="select(true)"
      >
        {{ props.trueLabel ?? 'Ja' }}
      </button>
      <button
        type="button"
        class="choice-btn"
        :class="{ active: modelValue === false }"
        role="radio"
        :aria-checked="modelValue === false"
        @click="select(false)"
      >
        {{ props.falseLabel ?? 'Nein' }}
      </button>
    </div>
  </section>
</template>

<style scoped>
h2 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.choice-btn {
  min-height: 56px;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: background 0.12s ease-out, border-color 0.12s ease-out, box-shadow 0.12s ease-out,
    transform 0.08s ease-out;
}

.choice-btn:hover {
  background: #f3f4f6;
}

.choice-btn.active {
  background: #e5f0ff;
  border-color: #2563eb;
  color: #0b1f4a;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.choice-btn:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}
</style>
