@props(['testimonial'])

<div data-reveal {{ $attributes->merge(['class' => 'card flex h-full flex-col p-6']) }}>
    <div class="mb-3 flex gap-0.5 text-brand-lime-500">
        @for ($i = 1; $i <= 5; $i++)
            <svg class="h-4 w-4 {{ $i <= $testimonial->rating ? '' : 'opacity-20' }}" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.958a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.368 2.447a1 1 0 00-.364 1.118l1.287 3.957c.3.922-.755 1.688-1.539 1.118l-3.367-2.446a1 1 0 00-1.175 0l-3.367 2.446c-.784.57-1.838-.196-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.063 9.385c-.783-.57-.38-1.81.588-1.81h4.163a1 1 0 00.95-.69l1.285-3.958z"/></svg>
        @endfor
    </div>
    <p class="flex-1 text-sm leading-relaxed text-brand-ink/80">&ldquo;{{ $testimonial->message }}&rdquo;</p>
    <div class="mt-5 flex items-center gap-3">
        @if ($testimonial->photoUrl())
            <img src="{{ $testimonial->photoUrl() }}" alt="{{ $testimonial->name }}" class="h-10 w-10 rounded-full object-cover">
        @else
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-brand-green-100 text-sm font-bold text-brand-green-800">
                {{ mb_substr($testimonial->name, 0, 1) }}
            </div>
        @endif
        <div>
            <p class="text-sm font-bold text-brand-ink">{{ $testimonial->name }}</p>
            @if ($testimonial->location)
                <p class="text-xs text-brand-ink/50">{{ $testimonial->location }}</p>
            @endif
        </div>
    </div>
</div>