<template>
  <div class="flex items-center gap-2">
    <button
        type="button"
        class="relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-100 transition-colors duration-200 ease-in-out"
        role="switch"
        :aria-checked="modelValue"
        @click="toggle"
        :class="classes"
    >
      <span
          aria-hidden="true"
          class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
          :class="{
          'translate-x-5': modelValue,
          'translate-x-0': !modelValue,
          '!translate-x-3': small && modelValue,
          '!h-2 !w-2': small,
        }"
      >
      </span>
    </button>
    <span class="text-sm text-gray-700 font-medium" v-if="title">{{ title }}</span>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  modelValue: {
    type: [Number, Boolean]
  },
  title: {
    type: String,
  },
  isDisabled: {
    type: Boolean
  },
  small: {
    type:Boolean
  },
  ring: {
    type:Boolean
  },
});

const emit = defineEmits('update:modelValue');

const classes = computed(() => ({
  '!bg-brand-700 hover:!bg-brand-700': props.modelValue,
  '!h-3 !w-6': props.small,
  'focus:outline-none focus:ring-2 focus:ring-brand-700 focus:ring-offset-2': props.ring !== false,
}));

const toggle = () => {
  if (props.isDisabled) {
    return;
  }
  emit("update:modelValue", !props.modelValue);
};
</script>