<template>
  <v-btn @click="_publishMessage" v-bind="$attrs">
    <slot/>
  </v-btn>
</template>

<script setup>
  import { publishMessage } from '@/services/mqttService'
  import { ref, defineProps } from 'vue'

  const props = defineProps({
    topic: String,
    message: null
  })

  const disabled = ref(false)

  const _publishMessage = () => {
    publishMessage(props.topic, JSON.stringify(props.message))
    disabled.value = true
  }
</script>
