{{--
    Copy Button Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
    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 items-center justify-center size-5 p-0 bg-transparent border-none text-base/50 cursor-pointer transition-colors duration-200 hover:text-primary"
        :class="copied ? 'text-success' : ''"
        title="Copy to clipboard"
    >
        <x-ri-check-fill class="size-4 absolute" x-show="copied" x-transition x-cloak />
        <x-ri-file-copy-line class="size-4 absolute" x-show="!copied" x-transition />
    </button>
</div>