import { computed } from 'vue'
import { uniqueId } from 'lodash-es'

export const SwitchInput = ({ modelValue }: { modelValue: boolean }) => {
  vineEmits([ 'input', 'update:model-value' ])

  const id = computed(() => uniqueId('switch-'))

  return vine`
    <input
      type="checkbox"
      role="switch"
      :id="id"
      :checked="modelValue"
      @change="$emit('update:model-value', $event.target.checked)"
    >
  `
}