<script setup>
import { ref } from 'vue'
import { useGun } from '#composables'

const props = defineProps({
  tag: { type: String, default: '' },
  hash: { type: String, default: '' },
  host: { type: String, default: '' },
})

const gun = useGun()

const banned = ref(false)

gun.get('ban').get(props.hash).on(d => {
  banned.value = d
})

async function banPost() {
  let banned = await gun.get('ban').get(props.hash).then()
  gun.get('ban').get(props.hash).put(!banned)
}

</script>

<template lang="pug">
button.m-1.button.items-center(
  :style="{ color: banned ? 'red' : 'inherit' }" 
  @click.stop.prevent="banPost()"
  )
  .i-la-trash-alt
</template>