{{--
    Copy Button Component - TailAdmin style
    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, 2000);
        }
    }"
    class="inline-flex items-center"
    {{ $attributes }}
>
    <button
        @click="copyToClipboard()"
        type="button"
        class="relative inline-flex size-5 items-center justify-center text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
        title="Copy to clipboard"
    >
        <x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success-500" />
        <x-ri-file-copy-line x-show="!copied" x-transition class="absolute size-4" />
    </button>
</div>