<!-- Toggle wrapper component -->
<script setup lang="ts">
import { ElSwitch } from 'element-plus';

// Props
const { activeText, inactiveText, disabled = false } = defineProps<{
    activeText: string;
    inactiveText: string;
	disabled?: boolean;
}>();

// Store the value
const value = defineModel<boolean>();
</script>

<template>
    <ElSwitch class="toggle" :active-text="activeText" :inactive-text="inactiveText" v-model="value" :disabled="disabled" />
</template>

<style lang="scss">
.el-switch.toggle {
    --el-switch-on-color: theme('colors.primary-500');
    --el-color-primary: theme('colors.primary-500');
    --el-switch-off-color: theme('colors.neutral-900');
    --el-text-color-primary: theme('colors.base-500');

	.el-switch__input {
		opacity: 0 !important;
	}

    .el-switch__label {
        @apply max-md:text-center;
    }
}
</style>
