@props([
    'engageType' => 'article',
    'engageId' => 0,
    'engagement' => [],
])

@php
    $locale = app()->getLocale();
    $engageRoutes = [
        'state' => route('site.engage.state', ['locale' => $locale]),
        'view' => route('site.engage.view', ['locale' => $locale]),
        'like' => route('site.engage.like', ['locale' => $locale]),
        'comments' => route('site.engage.comments', ['locale' => $locale]),
        'commentStore' => route('site.engage.comments.store', ['locale' => $locale]),
    ];
@endphp

<div
    {{ $attributes }}
    x-data="siteEngage({
        type: @js($engageType),
        id: @js($engageId),
        engagement: @js($engagement),
        routes: @js($engageRoutes),
        labels: @js([
            'pending' => __('site.comment_pending'),
            'bodyMin' => 3,
            'bodyMinMessage' => __('site.comment_body_min'),
            'submitFailed' => __('site.comment_submit_failed'),
            'replyingTo' => __('site.comment_replying_to'),
        ]),
    })"
    @site-auth:logged-in.window="refreshState()"
>
    {{ $slot }}
    <x-site.engagement.comment-fab />
    <x-site.engagement.comment-modal />
</div>