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

interface QuestionOption {
  value: string
  label: string
  icon?: string
}

const props = defineProps<{
  title: string
  options: QuestionOption[]
}>()

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

<template>
  <section class="symptom-section" aria-labelledby="symptom-title" role="radiogroup">
    <h2 id="symptom-title">{{ props.title }}</h2>
    <p class="sr-only">Bitte wählen Sie genau eine Option aus.</p>
    <div class="grid">
      <button
        v-for="opt in props.options"
        :key="opt.value"
        type="button"
        class="symptom-btn"
        :class="{ active: opt.value === modelValue }"
        role="radio"
        :aria-checked="opt.value === modelValue"
        @click="select(opt.value)"
      >
        <span v-if="opt.icon" class="icon-wrapper">
          <img :src="opt.icon" :alt="opt.label" class="icon" />
        </span>
        <span class="label">{{ opt.label }}</span>
      </button>
    </div>
  </section>
</template>

<style scoped>
.symptom-section {
  display: block;
}

h2 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

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

.symptom-btn {
  padding: 0.75rem 0.75rem;
  border-radius: 18px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  text-align: left;
  font-size: 0.95rem;
  color: #111827;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: background 0.12s ease-out, border-color 0.12s ease-out, box-shadow 0.12s ease-out,
    transform 0.08s ease-out;
}

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

.symptom-btn.active {
  background: linear-gradient(145deg, #16a34a, #15803d);
  border-color: #15803d;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(22, 163, 74, 0.4);
}

.symptom-btn:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

.icon-wrapper {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
}

.icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.label {
  flex: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>
