@props([
    'recordId',
    'value' => ''
])

<div x-data="{
        title: '',
        href: '',
        async getFieldName() {
            try {
                const value = {{ json_encode($value) }};
                const name = await $wire.getfieldname('{{ $recordId }}', value);
                if (name && name.title) {
                    this.title = name.title;
                    this.href = name.href;
                } else {
                    this.title = '--';
                    this.href = '#';
                }
            } catch (error) {
                console.error('Error fetching field name:', error);
                this.title = 'Error';
                this.href = '#';
            }
        }
    }"
    x-init="getFieldName()"
    wire:key="recordname-{{ $recordId }}-{{ json_encode($value) }}"
    @click.away="editing = false"
>
    <template x-if="href && title != '--'">
        <a :href="href" class="text-blue-600 hover:underline" target="_blank" x-text="title"></a>
    </template>
    <template x-if="!href || title == '--'">
        <span x-text="title"></span>
    </template>
</div>