<script setup>
import { defineProps } from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const props = defineProps({
  onSwitch: Function,
  value: Boolean,
  title: String,
  disabled: Boolean,
  description: String,
  icon: String,
  color: String,
  isCompact: {
    type: Boolean,
    default: false,
  },
  price: {
    type: Number,
    default: null,
  }
});

const uniqueId = Math.random().toString(36).substring(7);
</script>

<template>
  <div class="field">
    <label class="label" v-if="!props.isCompact">{{ title }}</label>
    <div class="control" v-if="!props.isCompact">
      <input
        :id="uniqueId"
        type="checkbox"
        :name="uniqueId"
        class="switch is-rounded is-outlined is-success"
        :checked="value"
        @change="onSwitch($event.target.checked)"
        :disabled="disabled"
      />
      <label :for="uniqueId" class="label"></label>
    </div>
    <!-- Compact level switch -->
    <div class="control" v-else>
      <nav class="level is-mobile">
        <div class="level-left">
          <div class="level-item">
            <input
              :id="uniqueId"
              type="checkbox"
              :name="uniqueId"
              class="switch is-rounded is-outlined is-success"
              :checked="value"
              @change="onSwitch($event.target.checked)"
              :disabled="disabled"
            />
            <label :for="uniqueId" class="label"></label>
          </div>
          <div class="level-item">
            <label class="label">{{ title }}</label>
          </div>
          <!-- Optional price display -->
          <div class="level-item" v-if="price !== null">
            <span class="tag is-rounded is-light" v-bind:class="{ 'is-success': props.value }">{{ SessionUser.functions.currency.toLocal(price) }}</span>
          </div>
        </div>
      </nav>
    </div>
    <p class="help">{{ description }}</p>
  </div>
</template>

<style scoped>

</style>