<template>
    <SwitchGroup class="flex items-center justify-start gap-2" as="span">
        <span class="sr-only">Switch {{ enabled }}</span>

        <Switch
            v-model="enabled"
            :class="enabled ? 'bg-gray-200/25' : 'bg-gray-200/50'"
            class="relative inline-flex items-center h-3 transition rounded-full drop-shadow w-7"
        >
            <span
                :class="
                    enabled
                        ? 'rtl:-translate-x-4 ltr:translate-x-4 bg-blue-300'
                        : 'rtl:translate-x-1 ltr:-translate-x-1 bg-white'
                "
                class="inline-block w-4 h-4 transition transform rounded-full drop-shadow-sm"
            />
        </Switch>
        <SwitchLabel
            v-if="label"
            class="text-sm font-medium select-none"
            :class="enabled ? 'text-blue-300' : 'text-gray-200'"
            >{{ label }}</SwitchLabel
        >
    </SwitchGroup>
</template>

<script>
import { ref, watch } from "vue";
import { Switch, SwitchGroup, SwitchLabel } from "@headlessui/vue";

export default {
    components: {
        Switch,
        SwitchGroup,
        SwitchLabel,
    },
    props: {
        enabled: {
            type: Boolean,
            default: false,
        },
        label: {
            type: String,
            default: "",
        },
    },
    watch: {
        enabled() {
            this.$emit("update:enabled", this.enabled);
        },
    },
};
</script>
