<template>
  <div>
    <div class="text-left label"><label :for="`select-input-${getId}`">{{ title }}</label></div>
    <b-form-select
      v-model="getCurrentValue"
      :options="options"
      :id="`select-input-${getId}`"
      class="radius-theme"
    />
  </div>
</template>

<script>
export default {
  name: 'select-input',
  props: {
    options: {
      type: Array,
      required: true,
    },
    selected: {
      type: [Number, String],
    },
    title: {
      type: String,
      default: 'Selecione: ',
    },
  },
  model: {
    prop: 'selected',
    event: 'change',
  },
  computed: {
    getCurrentValue: {
      get() {
        return this.selected;
      },
      set(value) {
        this.$emit('change', value);
      },
    },
    getId() {
      return Math.floor(Math.random() * 100);
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../../assets/css/main.scss';
@import '../../../assets/css/cards.scss';
</style>
