@props([
  'name',
  'value' => '',
  'label' => null,
  'presets' => ['🙂','😄','😎','🤓','🥳','🤠','🧑‍💻','👩‍🍳','🧔','👩','🧑','👶','🧑‍🦱','🧑‍🦰','🧑‍🦳','🧑‍🦲','🐶','🐱','🐻','🦊','🐼','🐸','🐵'],
  'inputClass' => 'w-20 text-center apple-card-inset px-3 py-3.5 text-[18px] text-foreground outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl',
  'maxLength' => 8,
  'required' => true,
])

@php
  $id = 'ep_' . \Illuminate\Support\Str::uuid()->toString();
  $current = old($name, $value);
@endphp

<div class="space-y-3">
  @if ($label)
    <p class="text-[12px] mb-2 px-0.5 text-muted-foreground">{{ $label }}</p>
  @endif

  <div class="flex items-center gap-3">
    <input
      id="{{ $id }}"
      type="text"
      name="{{ $name }}"
      value="{{ $current }}"
      maxlength="{{ $maxLength }}"
      class="{{ $inputClass }}"
      {{ $required ? 'required' : '' }}
    />
    <div class="text-[13px] text-muted-foreground">
      Pick one below or paste any emoji.
    </div>
  </div>

  <div class="flex flex-wrap gap-2">
    @foreach ($presets as $e)
      <button
        type="button"
        class="w-10 h-10 rounded-2xl text-[20px] flex items-center justify-center transition-all apple-card active:scale-[0.98]"
        data-emoji="{{ $e }}"
        onclick="(function(){ const el=document.getElementById(@js($id)); if(el) el.value=@js($e); })()"
        aria-label="Choose {{ $e }}"
      >
        {{ $e }}
      </button>
    @endforeach
  </div>
</div>