<template>
  <b-field class="column mb-0 pb-0" :class="columnSize" :label="label">
    <b-radio-button
      v-model="opcion"
      native-value=""
      type="is-primary is-light is-outlined"
    >
      <p>Todos</p>
    </b-radio-button>

    <b-radio-button
      v-model="opcion"
      :native-value="true"
      type="is-success is-light is-outlined"
    >
      <p>Si</p>
    </b-radio-button>

    <b-radio-button
      v-model="opcion"
      :native-value="false"
      type="is-danger is-light is-outlined"
    >
      <p>No</p>
    </b-radio-button>
  </b-field>
</template>

<script>
export default {
  props: {
    columnSize: { typeof: String, required: false, default: '' },
    label: { typeof: String, required: true, default: '' },
  },
  data: () => {
    return { opcion: '' }
  },
  watch: {
    opcion() {
      this.$emit('opcion', this.opcion)
    },
  },
}
</script>

<style scoped></style>
