<script setup lang="ts">
import { Switch } from "@headlessui/vue";
import { ref } from "vue";

interface Props {
  initiallySwitchedLeft?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  initiallySwitchedLeft: false,
});

const isSwitchedLeft = ref(props.initiallySwitchedLeft);
</script>

<template>
  <Switch
    v-model="isSwitchedLeft"
    class="relative inline-flex h-5 w-11 min-w-[44px] items-center rounded-full bg-gray-200"
  >
    <span
      :class="isSwitchedLeft ? 'translate-x-6' : 'translate-x-0'"
      class="inline-block h-5 w-5 transform rounded-full bg-black transition"
    />
  </Switch>
</template>
