@props([
    'icon',
    'label',
    'lines' => [],
    'href' => '#',
    'showChevron' => true,
    'avatar' => null,
    'avatarUrl' => null,
    'last' => false,
    'emailVerification' => null,
])

<a
    href="{{ $href }}"
    {{ $attributes->merge(['class' => 'profile-settings-row' . ($last ? '' : ' profile-settings-row--bordered')]) }}
>
    <span class="profile-settings-row__icon" aria-hidden="true">
        <x-platform.lucide-icon :name="$icon" class="h-5 w-5" />
    </span>

    <span class="profile-settings-row__content min-w-0 flex-1">
        <span class="profile-settings-row__label">{{ $label }}</span>
        @foreach ($lines as $line)
            <span class="profile-settings-row__value break-words">{{ $line }}</span>
        @endforeach
    </span>

    @if ($avatarUrl)
        <img src="{{ $avatarUrl }}" alt="" class="profile-settings-row__avatar-img">
    @elseif ($avatar)
        <span class="profile-settings-row__avatar">{{ $avatar }}</span>
    @endif

    @if ($showChevron)
        @if ($emailVerification)
            <div
                class="profile-settings-row__trailing"
                x-data="profileEmailVerification(@js($emailVerification))"
                x-init="init()"
            >
                <button
                    x-show="!verified"
                    x-cloak
                    type="button"
                    class="profile-settings-row__email-alert"
                    title="{{ $emailVerification['tooltip'] }}"
                    aria-label="{{ $emailVerification['tooltip'] }}"
                    @click="handleAlertClick($event)"
                >
                    <x-platform.lucide-icon name="triangle-alert-solid" class="profile-settings-row__status-icon" />
                </button>

                <span class="profile-settings-row__chevron" aria-hidden="true">
                    <x-platform.lucide-icon name="chevron-right" class="h-5 w-5" />
                </span>
            </div>
        @else
            <span class="profile-settings-row__chevron" aria-hidden="true">
                <x-platform.lucide-icon name="chevron-right" class="h-5 w-5" />
            </span>
        @endif
    @endif
</a>