@props([
  'emailName' => 'invite_email',
  'avatarName' => 'invite_avatar',
  'buttonLabel' => __('Invite by email'),
  'title' => __('Invite by email (optional)'),
  'placeholder' => __('name@example.com'),
  'defaultAvatar' => '🙂',
])

<div x-data="{ open: false }" class="space-y-3">
  <button
    type="button"
    @click="open = !open"
    class="w-full apple-card px-4 py-3.5 flex items-center justify-between gap-3 text-left"
  >
    <span>
      <span class="block text-[15px] font-medium text-foreground">{{ $buttonLabel }}</span>
      <span class="block text-[12px] text-muted-foreground">{{ __('Optional, only if someone is not already in your space.') }}</span>
    </span>
    <x-lucide-chevron-down class="w-4 h-4 text-muted-foreground transition-transform" x-bind:class="open ? 'rotate-180' : ''" />
  </button>

  <div x-cloak x-show="open" class="apple-card p-4 space-y-3">
    <p class="section-header px-1">{{ $title }}</p>
    <input
      type="email"
      name="{{ $emailName }}"
      placeholder="{{ $placeholder }}"
      class="w-full apple-card-inset px-4 py-3.5 text-[15px] text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl"
    />
    <x-emoji-picker :name="$avatarName" label="{{ __('Their avatar (optional)') }}" :value="$defaultAvatar" :required="false" />
  </div>
</div>