<script setup>
defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    label: {
        type: String,
        required: false
    },
    name: {
        type: String,
        required: true
    },
    value: {
        type: Boolean,
        default: true
    }
})

const emit = defineEmits(['update:modelValue'])

const toggle = (event) => {
    emit('update:modelValue', event.target.checked)
}
</script>

<template>
    <label class="switch-container">
        <span v-if="label" class="custom-label label-text flex1">{{ label }}</span>

        <input 
            type="checkbox"
            :name="name"
            :checked="modelValue"
            @change="toggle"
        >

        <span class="slider"></span>
    </label>
</template>

<style scoped>
.flex1 {
    flex: 1;
}
.switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 16px;
}

/* ocultar input */
.switch-container input {
    display: none;
}

/* fondo del switch */
.slider {
    position: relative;
    width: 45px;
    height: 25px;
    background-color: #ccc;
    border-radius: 25px;
    transition: 0.3s;
}

/* circulo */
.slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 4px;
    top: 3.5px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

/* estado activo */
input:checked + .slider {
    background-color: #5A67DD; /* tu color */
}

input:checked + .slider::before {
    transform: translateX(20px);
}

/* hover */
.switch-container:hover .slider {
    opacity: 0.8;
}
</style>