@props([
    'label' => null,
    'value',
    'id' => null,
    'multiline' => false,
    'rows' => 3,
    'help' => null,
])

@php
    $fieldId = $id ?: 'copy-field-' . \Illuminate\Support\Str::uuid();
@endphp

<div {{ $attributes->class(['ui-copy-field']) }}>
    @if ($label)
        <div class="ui-copy-field-label">
            {{ $label }}
        </div>
    @endif

    <div class="ui-copy-field-control">
        @if ($multiline)
            <textarea
                id="{{ $fieldId }}"
                rows="{{ $rows }}"
                class="ui-copy-field-value resize-y"
                readonly
            >{{ $value }}</textarea>
        @else
            <input
                id="{{ $fieldId }}"
                type="text"
                value="{{ $value }}"
                class="ui-copy-field-value"
                readonly
            >
        @endif

        <button
            type="button"
            class="ui-copy-field-button"
            data-copy-target="#{{ $fieldId }}"
            aria-label="Copiar {{ $label ? strtolower($label) : 'conteúdo' }}"
        >
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15.75 17.25v3a2.25 2.25 0 0 1-2.25 2.25h-9A2.25 2.25 0 0 1 2.25 20.25v-9A2.25 2.25 0 0 1 4.5 9h3m3-7.5h9A2.25 2.25 0 0 1 21.75 3.75v9A2.25 2.25 0 0 1 19.5 15h-9a2.25 2.25 0 0 1-2.25-2.25v-9A2.25 2.25 0 0 1 10.5 1.5Z" />
            </svg>

            <span>Copiar</span>
        </button>
    </div>

    @if ($help)
        <p class="ui-field-help">
            {{ $help }}
        </p>
    @endif
</div>