<template>
  <div class="row mb-3">
    <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
      {{ trans(EVALUATION_TIME_SPENT) }}
    </label>
    <div class="col-8 col-sm-4 col-md-8 col-lg-4">
      <select
        class="form-control form-control-sm"
        :value="timeSpent"
        @input="$emit('update:timeSpent', $event.target.value)"
      >
        <option disabled value="">
          {{ trans(EVALUATION_TIME_SPENT) }}
        </option>
        <option
          v-for="time in timeSpentChoices"
          :value="time.value"
          :key="time.value"
        >
          {{ time.text }}
        </option>
      </select>
    </div>
  </div>
</template>

<script setup>
import { EVALUATION_TIME_SPENT, trans } from "translator";

defineProps(["timeSpent", "timeSpentChoices"]);
defineEmits(["update:timeSpent"]);
</script>
