<script setup>
const props = defineProps({
  step: Object,
  stepNumber: Number,
  totalSteps: Number,
  activeModelColor: String,
  activeModelBgColor: String,
});
const emit = defineEmits(["cancel", "select"]);
</script>

<template>
  <div class="multi-form-container">
    <div class="multi-form-header mb-3">
      <div class="d-flex justify-space-between align-center mb-2">
        <div class="form-title font-weight-bold">
          {{ step.formTitle }}
        </div>
        <div class="d-flex align-center">
          <VChip :color="activeModelColor" size="small" variant="tonal">
            {{ stepNumber }}/{{ totalSteps }}
          </VChip>
          <VBtn icon size="x-small" @click="emit('cancel')" class="ms-2">
            <VIcon icon="tabler-x" />
          </VBtn>
        </div>
      </div>

      <VProgressLinear
        :model-value="(stepNumber / totalSteps) * 100"
        :color="activeModelColor"
        height="4"
        rounded
        class="mb-3"
      ></VProgressLinear>
    </div>

    <div class="step-title font-weight-medium mb-2">
      {{ step.title }}
    </div>

    <div class="form-question mb-3">
      {{ step.question }}
    </div>

    <div v-if="step.type === 'options'" class="form-options">
      <div class="d-flex flex-wrap gap-2">
        <VBtn
          v-for="(option, optIndex) in step.options"
          :key="optIndex"
          :color="activeModelColor"
          variant="outlined"
          size="small"
          class="form-option-btn"
          @click="emit('select', { id: step.id, value: option })"
        >
          {{ option }}
        </VBtn>
      </div>
    </div>
  </div>
</template>

<style scoped>
.multi-form-container {
  max-width: 100%;
}

.multi-form-header {
  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.1);
  padding-bottom: 12px;
}

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

.step-title {
  font-size: 0.95rem;
  color: rgba(var(--v-theme-on-surface), 0.8);
}

.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>