{{--
    Copy Button Component - TailServer Theme
    Small inline button to copy text to clipboard
    
    Usage:
    <x-proxmox::ui.copy-button :value="$text" />
--}}

@props([
    'value',
])

<div 
    x-data="{
        copied: false,
        copyText: @js($value),
        copyToClipboard() {
            navigator.clipboard.writeText(this.copyText);
            this.copied = true;
            setTimeout(() => this.copied = false, 3000);
        }
    }"
    class="inline-flex items-center"
    {{ $attributes }}
>
    <button
        @click="copyToClipboard()"
        type="button"
        class="text-base/50 hover:text-base/70 transition-colors relative inline-flex items-center justify-center size-4"
        title="Copy to clipboard"
    >
        <x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success" />
        <x-ri-file-copy-line x-show="!copied" x-transition class="absolute size-4" />
    </button>
</div>