<script>
import {mapGetters, mapActions} from "vuex"

export default {
  name: 'PackViewButton',
  components: {
  },
  props: {
    active: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    inner: {
      type: String,
      default: ""
    },
    labelClass: {
      type: String,
      default: ""
    },
    idx: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters('machines', ['selectedPackMode']),
  },
  methods: {
    ...mapActions('machines', ['updateModePack']),
  }
}

</script>


<template>
  {{ console.log('selectedPackMode', selectedPackMode)
  }}
  <button
    :key="idx"
    type="button"
    class="w-full"
    @click="updateModePack(mode)"
  >
    <input
      :id="name"
      name="switchTableMode"
      type="radio"
      :value="name"
      :checked="active"
      class="hidden peer"
      required=""
    >
    <label
      :for="name"
      :class="labelClass"
      class="transition-all w-full border-slate-600 w-full block cursor-pointer py-1 text-ssm sm:text-sm hover:bg-slate-700 hover:text-white text-slate-600 border-slate-600
    peer-checked:bg-slate-600 peer-checked:text-white"
    >
      {{ inner }}
    </label>
  </button>
</template>
