<script setup lang="ts">
import { ref, inject } from "vue"
// import Toggle from '~/components/pub/ui/toggle/Toggle.vue'

const props = defineProps<{
  label: string,
  providedKey?: string,
  variant?: 'default' | 'outline' | null | undefined
}>()

const model = defineModel<boolean>()
const provideKey = props.providedKey || 'toggle-provide'
const { updateProvidedVal }  = inject(provideKey)

watch(model, (newVal) => {
  updateProvidedVal(newVal)
})
</script>

<template>
  <Button
    @click="() => model = !model"
    :variant="model ? 'default' : 'outline'"
  >
    {{ label }}
  </Button>
  <!-- <Toggle
    v-model="xval"
    :variant="variant ?? 'default'"
    :aria-label="label"
  >
  </Toggle> -->
  <!-- {{ xval }} -->
</template>
