<template>
  <div v-if="visible" class="ghost-text-overlay" :style="overlayStyle"
       @click="acceptSuggestion"
  >{{ suggestion }}
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    suggestion: { type: String, default: '' },
    position: { type: Object, required: true },
})

const emit = defineEmits(['accept', 'dismiss'])

const visible = computed(() => props.suggestion && props.position)

const overlayStyle = computed(() => ({
    position: 'absolute',
    left: `${props.position.left}px`,
    top: `${props.position.top}px`,
    fontSize: `${props.position.fontSize || 16}px`,
    fontFamily: props.position.fontFamily || 'monospace',
    color: '#999',
    backgroundColor: 'transparent',
    pointerEvents: 'auto',
    cursor: 'text',
    whiteSpace: 'pre-wrap',
    zIndex: 1000,
}))

const acceptSuggestion = () => emit('accept')
</script>

<style scoped>
.ghost-text-overlay {
    opacity: 0.6;
    user-select: none;
}

.ghost-text-overlay:hover {
    opacity: 1;
    color: #666;
}
</style>
