<script setup lang="ts">
const modelValue = defineModel<string>()

const options = [
  { code: 'de', label: 'Deutsch' },
  { code: 'en', label: 'English' },
  { code: 'ar', label: 'العربية' },
]

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

<template>
  <div>
    <h2>Sprache auswählen</h2>
    <p class="hint">Interface-Sprache für Fragen und Optionen</p>
    <div class="grid">
      <button
        v-for="opt in options"
        :key="opt.code"
        type="button"
        class="lang-btn"
        :class="{ active: opt.code === modelValue }"
        @click="select(opt.code)"
      >
        {{ opt.label }}
      </button>
    </div>
  </div>
</template>

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

.hint {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-bottom: 0.75rem;
}

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

.lang-btn {
  padding: 0.55rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 0.85rem;
  color: #111827;
  cursor: pointer;
  transition: background 0.12s ease-out, color 0.12s ease-out, border-color 0.12s ease-out,
    box-shadow 0.12s ease-out, transform 0.08s ease-out;
}

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

.lang-btn.active {
  background: #e5f0ff;
  border-color: #3b82f6;
  color: #0b1f4a;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}
</style>
