<template>
  <SwitchGroup @click="clicked" as="div" class="flex items-center">
    <Switch v-model="enabled" :class="[enabled ? 'bg-orange' : 'bg-indigo-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']">
      <!-- <span class="sr-only">Use setting</span> -->
      <span aria-hidden="true" :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']" />
    </Switch>
    <SwitchLabel as="span" class="ml-3">
      <span v-show="!enabled" class="text-sm text-white">{{textin}}</span>
      <span v-show="enabled" class="text-sm text-white">{{textout}}</span>
    </SwitchLabel>
  </SwitchGroup>
</template>

<script>

import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'

export default {
  components: {
    Switch,
    SwitchGroup,
    SwitchLabel,
  },
  emits: ['clicked'],
  props: {
    textin: String,
    textout: String,
    user_id: Number,
    enabled: {
        type: Boolean,
        default: false
    },
  },
  methods: {
      clicked(){
          this.$emit('clicked', this.user_id);
      }
  }
}
</script>
