@props([
    'engagement' => [],
    'variant' => 'article',
    'interactive' => true,
])

@php
    $e = $engagement;
@endphp

<div {{ $attributes->merge(['class' => 'eca-stats-bar']) }}>
    @if ($variant === 'product')
        <div class="eca-stats-bar__item">
            <x-site.svg-icon name="rate" class="eca-stats-bar__icon" />
            <span class="eca-stats-bar__value">{{ $e['rating_label'] ?? '0.0' }}</span>
            <span class="eca-stats-bar__label">{{ __('site.stats_rating') }}</span>
        </div>
        <div class="eca-stats-bar__item">
            <x-site.svg-icon name="eye" class="eca-stats-bar__icon" />
            <span class="eca-stats-bar__value" x-text="engagement.views_label">{{ $e['views_label'] ?? '0' }}</span>
            <span class="eca-stats-bar__label">{{ __('site.stats_views') }}</span>
        </div>
        <div class="eca-stats-bar__item">
            <x-site.svg-icon name="bag" class="eca-stats-bar__icon" />
            <span class="eca-stats-bar__value" x-text="engagement.sales_label">{{ $e['sales_label'] ?? '0' }}</span>
            <span class="eca-stats-bar__label">{{ __('site.stats_sold') }}</span>
        </div>
        <div class="eca-stats-bar__item">
            @if ($interactive)
                <button
                    type="button"
                    class="eca-stats-bar__action eca-stats-bar__like site-engage-glow"
                    :class="{ 'eca-stats-bar__like--active': engagement.user_liked }"
                    :disabled="likeLoading"
                    :aria-pressed="engagement.user_liked"
                    :aria-label="@js(__('site.stats_wishlist'))"
                    @click="toggleLike()"
                >
                    <x-site.svg-icon name="like" class="eca-stats-bar__icon" />
                    <span class="eca-stats-bar__value" x-text="engagement.likes_label">{{ $e['likes_label'] ?? '0' }}</span>
                    <span class="eca-stats-bar__label">{{ __('site.stats_wishlist') }}</span>
                </button>
            @else
                <x-site.svg-icon name="like" class="eca-stats-bar__icon" />
                <span class="eca-stats-bar__value">{{ $e['likes_label'] ?? '0' }}</span>
                <span class="eca-stats-bar__label">{{ __('site.stats_wishlist') }}</span>
            @endif
        </div>
        <div class="eca-stats-bar__item">
            @if ($interactive)
                <button
                    type="button"
                    class="eca-stats-bar__action site-engage-glow"
                    :aria-label="@js(__('site.comment_modal_title'))"
                    @click="openComments()"
                >
                    <x-site.svg-icon name="chat" class="eca-stats-bar__icon" />
                    <span class="eca-stats-bar__value" x-text="engagement.comments_label">{{ $e['comments_label'] ?? '0' }}</span>
                    <span class="eca-stats-bar__label">{{ __('site.stats_comments') }}</span>
                </button>
            @else
                <x-site.svg-icon name="chat" class="eca-stats-bar__icon" />
                <span class="eca-stats-bar__value">{{ $e['comments_label'] ?? '0' }}</span>
                <span class="eca-stats-bar__label">{{ __('site.stats_comments') }}</span>
            @endif
        </div>
    @elseif ($variant === 'service')
        <div class="eca-stats-bar__item">
            <x-site.svg-icon name="eye" class="eca-stats-bar__icon" />
            <span class="eca-stats-bar__value" x-text="engagement.views_label">{{ $e['views_label'] ?? '0' }}</span>
            <span class="eca-stats-bar__label">{{ __('site.stats_views') }}</span>
        </div>
        <div class="eca-stats-bar__item">
            @if ($interactive)
                <button
                    type="button"
                    class="eca-stats-bar__action eca-stats-bar__like site-engage-glow"
                    :class="{ 'eca-stats-bar__like--active': engagement.user_liked }"
                    :disabled="likeLoading"
                    :aria-pressed="engagement.user_liked"
                    :aria-label="@js(__('site.stats_likes'))"
                    @click="toggleLike()"
                >
                    <x-site.svg-icon name="like" class="eca-stats-bar__icon" />
                    <span class="eca-stats-bar__value" x-text="engagement.likes_label">{{ $e['likes_label'] ?? '0' }}</span>
                    <span class="eca-stats-bar__label">{{ __('site.stats_likes') }}</span>
                </button>
            @else
                <x-site.svg-icon name="like" class="eca-stats-bar__icon" />
                <span class="eca-stats-bar__value">{{ $e['likes_label'] ?? '0' }}</span>
                <span class="eca-stats-bar__label">{{ __('site.stats_likes') }}</span>
            @endif
        </div>
        <div class="eca-stats-bar__item">
            @if ($interactive)
                <button
                    type="button"
                    class="eca-stats-bar__action site-engage-glow"
                    :aria-label="@js(__('site.comment_modal_title'))"
                    @click="openComments()"
                >
                    <x-site.svg-icon name="chat" class="eca-stats-bar__icon" />
                    <span class="eca-stats-bar__value" x-text="engagement.comments_label">{{ $e['comments_label'] ?? '0' }}</span>
                    <span class="eca-stats-bar__label">{{ __('site.stats_comments') }}</span>
                </button>
            @else
                <x-site.svg-icon name="chat" class="eca-stats-bar__icon" />
                <span class="eca-stats-bar__value">{{ $e['comments_label'] ?? '0' }}</span>
                <span class="eca-stats-bar__label">{{ __('site.stats_comments') }}</span>
            @endif
        </div>
        <div class="eca-stats-bar__item">
            <x-site.svg-icon name="details" class="eca-stats-bar__icon" />
            <span class="eca-stats-bar__value" x-text="engagement.orders_label">{{ $e['orders_label'] ?? '0' }}</span>
            <span class="eca-stats-bar__label">{{ __('site.stats_orders') }}</span>
        </div>
        <div class="eca-stats-bar__item">
            <x-site.svg-icon name="rate" class="eca-stats-bar__icon" />
            <span class="eca-stats-bar__value">{{ $e['rating_label'] ?? '0.0' }}</span>
            <span class="eca-stats-bar__label">{{ __('site.stats_rating') }}</span>
        </div>
    @else
        <div class="eca-stats-bar__item">
            <x-site.svg-icon name="eye" class="eca-stats-bar__icon" />
            <span class="eca-stats-bar__value" x-text="engagement.views_label">{{ $e['views_label'] ?? '0' }}</span>
            <span class="eca-stats-bar__label">{{ __('site.stats_views') }}</span>
        </div>
        <div class="eca-stats-bar__item">
            @if ($interactive)
                <button
                    type="button"
                    class="eca-stats-bar__action eca-stats-bar__like site-engage-glow"
                    :class="{ 'eca-stats-bar__like--active': engagement.user_liked }"
                    :disabled="likeLoading"
                    :aria-pressed="engagement.user_liked"
                    :aria-label="@js(__('site.stats_likes'))"
                    @click="toggleLike()"
                >
                    <x-site.svg-icon name="like" class="eca-stats-bar__icon" />
                    <span class="eca-stats-bar__value" x-text="engagement.likes_label">{{ $e['likes_label'] ?? '0' }}</span>
                    <span class="eca-stats-bar__label">{{ __('site.stats_likes') }}</span>
                </button>
            @else
                <x-site.svg-icon name="like" class="eca-stats-bar__icon" />
                <span class="eca-stats-bar__value">{{ $e['likes_label'] ?? '0' }}</span>
                <span class="eca-stats-bar__label">{{ __('site.stats_likes') }}</span>
            @endif
        </div>
        <div class="eca-stats-bar__item">
            @if ($interactive)
                <button
                    type="button"
                    class="eca-stats-bar__action site-engage-glow"
                    :aria-label="@js(__('site.comment_modal_title'))"
                    @click="openComments()"
                >
                    <x-site.svg-icon name="chat" class="eca-stats-bar__icon" />
                    <span class="eca-stats-bar__value" x-text="engagement.comments_label">{{ $e['comments_label'] ?? '0' }}</span>
                    <span class="eca-stats-bar__label">{{ __('site.stats_comments') }}</span>
                </button>
            @else
                <x-site.svg-icon name="chat" class="eca-stats-bar__icon" />
                <span class="eca-stats-bar__value">{{ $e['comments_label'] ?? '0' }}</span>
                <span class="eca-stats-bar__label">{{ __('site.stats_comments') }}</span>
            @endif
        </div>
        @if (! empty($e['reading_time']))
            <div class="eca-stats-bar__item">
                <x-site.svg-icon name="time" class="eca-stats-bar__icon" />
                <span class="eca-stats-bar__value">{{ $e['reading_time'] }}</span>
                <span class="eca-stats-bar__label">{{ __('site.stats_reading_time', ['min' => $e['reading_time']]) }}</span>
            </div>
        @endif
        @if (! empty($e['published_at']))
            <div class="eca-stats-bar__item">
                <x-site.svg-icon name="articles" class="eca-stats-bar__icon" />
                <span class="eca-stats-bar__value">{{ $e['published_at'] }}</span>
                <span class="eca-stats-bar__label">{{ __('site.stats_published') }}</span>
            </div>
        @endif
    @endif
</div>