@props(['notification'])

<article
    class="platform-card p-4 transition-opacity"
    :class="{ 'opacity-60': readIds.includes({{ $notification['id'] }}) || {{ $notification['read'] ? 'true' : 'false' }} }"
    x-show="matchesTab(@js($notification))"
    data-type="{{ $notification['type'] }}"
    data-read="{{ $notification['read'] ? 'true' : 'false' }}"
>
    <div class="flex items-start gap-4">
        <span class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl" style="background: var(--accent-soft); color: var(--accent);">
            <x-platform.lucide-icon name="bell" class="h-5 w-5" />
        </span>
        <div class="min-w-0 flex-1">
            <div class="flex flex-wrap items-start justify-between gap-2">
                <h3 class="text-sm font-semibold">{{ __($notification['title']) }}</h3>
                <span class="platform-text-muted text-xs">{{ $notification['time'] }}</span>
            </div>
            <p class="platform-text-muted mt-1 text-sm leading-6">{{ __($notification['body']) }}</p>
            <div class="mt-3 flex flex-wrap gap-2">
                <button
                    type="button"
                    @click="markRead({{ $notification['id'] }})"
                    class="platform-btn-secondary text-xs"
                    x-show="!readIds.includes({{ $notification['id'] }}) && !{{ $notification['read'] ? 'true' : 'false' }}"
                >
                    {{ __('pages.notifications.mark_read') }}
                </button>
            </div>
        </div>
    </div>
</article>