@props(['value', 'label' => 'Kopieren'])

<button
    type="button"
    x-data="{ copied: false }"
    @click="navigator.clipboard.writeText(@js($value)).then(() => { copied = true; setTimeout(() => copied = false, 1500); }).catch(() => {
        var ta = document.createElement('textarea');
        ta.value = @js($value);
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        copied = true;
        setTimeout(() => copied = false, 1500);
    })"
    :class="copied ? 'text-green-400' : 'text-t2 hover:text-t1'"
    class="inline-flex items-center gap-1 text-xs transition-colors"
>
    <span x-show="!copied" class="flex items-center gap-1">
        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
            <rect x="5" y="5" width="8" height="8" rx="1"/><path stroke-linecap="round" stroke-linejoin="round" d="M11 5V3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h2"/>
        </svg>
        <span>{{ $label }}</span>
    </span>
    <span x-show="copied" class="flex items-center gap-1">
        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l3 3 7-7"/>
        </svg>
        <span>Kopiert</span>
    </span>
</button>