@props([
    'text' => '',
    'class' => '',
    'label' => '',
])
<button
    x-data="{ copied: false }"
    @click="
        navigator.clipboard.writeText(@js($text));
        copied = true;
        setTimeout(() => copied = false, 2000);
    "
    class="inline-flex items-center text-base gap-1.5 rounded-lg border border-white/10 bg-white/5 p-1 #py-1 text-white/80 hover:text-white hover:border-white/20 transition {{ $class }}"
>
    <template x-if="!copied">
        <span class="inline-flex items-center">
            <i class="ph ph-copy"></i> <small>{{ $label }}</small>
        </span>
    </template>
    <template x-if="copied">
        <span class="inline-flex items-center">
            <i class="ph ph-checks text-emerald-400"></i> <small>{{ $label }}</small>
        </span>
    </template>
</button>