Copy

<script setup lang="ts">
import type { HoneypotEvent } from "src/types";

const props = defineProps<{
  evt: HoneypotEvent;
}>();

const emit = defineEmits<{
  "field-click": [event: MouseEvent, key: string, value: string];
}>();
</script>

<template>
  <button
    v-if="evt.fields?.domain"
    @click="emit('field-click', $event, 'domain', evt.fields.domain as string)"
  >
    <span>Domain:</span>
    <strong>{{ evt.fields.domain }}</strong>
  </button>
  <button
    v-if="evt.fields?.security_layer"
    @click="
      emit(
        'field-click',
        $event,
        'security_layer',
        evt.fields.security_layer as string,
      )
    "
  >
    <span>Security Layer:</span>
    <strong>{{ evt.fields.security_layer }}</strong>
  </button>
  <button
    v-if="evt.fields?.workstation"
    @click="
      emit(
        'field-click',
        $event,
        'workstation',
        evt.fields.workstation as string,
      )
    "
  >
    <span>Workstation:</span>
    <strong>{{ evt.fields.workstation }}</strong>
  </button>
</template>