<script setup>
/**
 * Toggle switch — use this instead of PrimeVue ToggleSwitch in views.
 */
import { computed, ref } from "vue";
import ToggleSwitch from "primevue/toggleswitch";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  label: { type: String, default: "" },
  disabled: { type: Boolean, default: false },
  id: { type: String, default: undefined },
  class: { type: [String, Object, Array], default: "" },
});

const emit = defineEmits(["update:modelValue"]);

const fallbackId = ref(`base-toggle-${Math.random().toString(36).slice(2, 11)}`);
const inputId = computed(() => props.id ?? fallbackId.value);
</script>

<template>
  <div
    class="flex flex-row flex-wrap items-center gap-3 min-h-[2.75rem]"
    :class="props['class']"
  >
    <label
      v-if="label"
      :for="inputId"
      class="mb-0 text-surface-950 dark:text-surface-0 text-md font-medium leading-7 shrink-0"
    >
      {{ label }}
    </label>
    <ToggleSwitch
      :input-id="inputId"
      :model-value="modelValue"
      :disabled="disabled"
      @update:model-value="emit('update:modelValue', $event)"
    />
  </div>
</template>
