<script setup>
const props = defineProps({
  form: Object,
  activeModelColor: String,
});
const emit = defineEmits(["select"]);
</script>

<template>
  <div class="form-container">
    <div class="form-title font-weight-bold mb-2">
      {{ form.title }}
    </div>
    <div class="form-question mb-3">
      {{ form.question }}
    </div>
    <div class="form-options d-flex gap-2">
      <VBtn
        v-for="(option, optIndex) in form.options"
        :key="optIndex"
        :color="activeModelColor"
        variant="outlined"
        size="small"
        class="form-option-btn"
        @click="emit('select', option)"
      >
        {{ option }}
      </VBtn>
    </div>
  </div>
</template>

<style scoped>
.form-title {
  font-size: 1.1rem;
  color: rgb(var(--v-theme-on-surface));
}

.form-question {
  font-size: 0.9rem;
  line-height: 1.4;
}

.form-options .form-option-btn {
  margin-bottom: 8px;
  border-radius: 8px;
  text-transform: none;
}

.form-options .form-option-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
