@props([
    'value',
    'label'  => 'Copied',       // announced in the toast
    'title'  => 'Copy',         // tooltip / accessible name
    'ghost'  => true,           // sits inside a table cell rather than on its own
])

{{--
| Copy-to-clipboard, self-contained.
|
| The icon swaps to a tick for a moment on success, which is the only feedback
| most people need, and a `toast` event goes up to the page so the confirmation
| is also announced somewhere a screen reader will read it.
|
| window.copyText (resources/js/clipboard.js) is used rather than
| navigator.clipboard directly: the Clipboard API is unavailable on plain HTTP,
| which is exactly how this panel is served in local development.
--}}

<button type="button"
        x-data="{ done: false }"
        @click.stop.prevent="
            window.copyText(@js($value)).then((ok) => {
                if (! ok) return;
                done = true;
                $dispatch('toast', { message: @js($label) });
                setTimeout(() => (done = false), 1400);
            })
        "
        :aria-label="done ? 'Copied' : @js($title)"
        title="{{ $title }}"
        {{ $attributes->merge(['class' => 'inline-grid size-6 shrink-0 place-items-center rounded-md transition '
            . ($ghost
                ? 'text-slate-400 opacity-0 hover:bg-slate-100 hover:text-slate-700 focus-visible:opacity-100 group-hover:opacity-100 dark:hover:bg-white/10 dark:hover:text-white'
                : 'text-slate-400 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-white/10 dark:hover:text-white')]) }}>

    <x-icon name="copy"  class="size-3.5" x-show="! done" />
    <x-icon name="check" class="size-3.5 text-emerald-500" x-show="done" x-cloak />
</button>