@props(['review'])

<article class="flex flex-col gap-3 py-6">

    <x-reviews-stars :rating="$review['rating']" :size="23" />

    <div class="flex items-end gap-4">
        <span class="text-2xl font-bold leading-none">
            {{ $review['name'] ?? 'Ανώνυμος' }}
        </span>
        <time class="text-sm text-neutral-500 shrink-0 leading-none pb-0.5">{{ $review['date'] }}</time>
    </div>

    <p class="leading-relaxed">{{ $review['text'] }}</p>

    @if (!empty($review['image']))
        <div class="mt-1">
            <a href="{{ $review['image'] }}" target="_blank" rel="noopener noreferrer">
                <img
                    src="{{ $review['image'] }}"
                    alt="Φωτογραφία από τον αγοραστή"
                    class="w-24 h-24 object-cover border border-black"
                >
            </a>
        </div>
    @endif

    @if (!empty($review['reply']))
        <div class="mt-2 pl-4 border-l-2 border-neutral-300 flex flex-col gap-1">
            <p class="text-sm font-bold">
                {{ __('storefront.review.reply') }}
                @if (!empty($review['replyDate']))
                    <span class="font-normal text-neutral-500">— {{ $review['replyDate'] }}</span>
                @endif
            </p>
            <p class="leading-relaxed">{{ $review['reply'] }}</p>
        </div>
    @endif

</article>