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

interface QuestionOption {
  value: string
  label: string
}

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

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

<template>
  <div>
    <h2>{{ props.title }}</h2>
    <div class="grid">
      <button
        v-for="opt in props.options"
        :key="opt.value"
        type="button"
        class="symptom-btn"
        :class="{ active: opt.value === modelValue }"
        @click="select(opt.value)"
      >
        {{ opt.label }}
      </button>
    </div>
  </div>
</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;
}

.symptom-btn {
  padding: 0.85rem 0.75rem;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  text-align: left;
  font-size: 0.95rem;
  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;
}

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

.symptom-btn.active {
  background: linear-gradient(145deg, #22c55e, #16a34a);
  border-color: #16a34a;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(34, 197, 94, 0.35);
}
</style>
