@props(['value'])

{{--
    Botón de copiado icon-only para valores DNS (nombre, destino, token).
    Existe porque el reseller pega estos valores en su proveedor DNS y
    transcribirlos a mano ya produjo un TXT colgado de la zona equivocada.
    SVG inline (no lucide): createIcons() reemplaza el nodo y rompería x-show.
--}}
<span x-data="{
    copied: false,
    copy() {
        const v = @js($value);
        const done = () => { this.copied = true; setTimeout(() => this.copied = false, 2000); };
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(v).then(done);
        } else {
            const el = document.createElement('textarea');
            el.value = v; el.style.position = 'fixed'; el.style.opacity = '0';
            document.body.appendChild(el); el.select();
            document.execCommand('copy'); document.body.removeChild(el); done();
        }
    }
}" class="inline-flex shrink-0 items-center">
    <button type="button" @click="copy()" class="rf-btn rf-btn-ghost rf-btn-sm" style="padding:2px 6px;min-width:0;"
            :title="copied ? @js(__('Copied')) : @js(__('Copy'))" :aria-label="copied ? @js(__('Copied')) : @js(__('Copy'))">
        <svg x-show="!copied" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
        <span x-show="copied" x-cloak style="color:var(--color-success);font-size:12px;line-height:13px;">&#10003;</span>
    </button>
</span>