<template>
  <div class="dropdown-question">
    <label :for="inputId" class="form-label">{{labelText}}</label>
    <select class="form-select" aria-label="Default select example" :id="inputId" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
      <option selected>Placeholder</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <p class="mt-1 mb-0">There has been an error!</p>
  </div>
</template>

<script>
export default {
  name: "dropdownQuestion",
  props: {
    isDisabled: Boolean,
    modelValue: String,
    labelText: String,
    inputId: String,
    isRequired: Boolean,
  }
};
</script>

<style lang="scss">
.dropdown-question {
  .form-label {
    margin-bottom: .25rem;
  }
  .form-select {
    color: $gray-600;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
    border: 1px solid $gray-500;
    border-radius: .5rem;
    min-height: 3rem;
    &:focus,
    &:focus-visible {
      box-shadow: 0 0 0 2px $blue;
    }
    &:disabled,
    &.disabled {
      background-color: $gray-100;
      filter: grayscale(100%);
      &:hover {
        box-shadow: 0 0 0 4px transparent;
        border: 1px solid $gray-500;
      }
    }
    &:hover {
      border: 1px solid transparent;
      box-shadow: 0 0 0 4px $blue-300;
    }
  }
}
</style>
