@props(['testimonial'])

<figure class="ws-card flex h-full flex-col p-7">
    <div class="flex items-center gap-1" aria-label="Rated {{ $testimonial->rating }} out of 5">
        @for ($i = 1; $i <= 5; $i++)
            <svg class="h-4 w-4 {{ $i <= $testimonial->rating ? 'text-amber-400' : 'text-slate-200' }}" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
        @endfor
    </div>
    <blockquote class="mt-4 flex-1 text-sm leading-relaxed text-slate-600">
        &ldquo;{{ $testimonial->message }}&rdquo;
    </blockquote>
    <figcaption class="mt-5 flex items-center gap-3 border-t border-slate-100 pt-4">
        @if ($testimonial->photo)
            <img src="{{ asset('storage/' . $testimonial->photo) }}" alt="{{ $testimonial->name }}" loading="lazy" class="h-10 w-10 rounded-full object-cover">
        @else
            <span class="flex h-10 w-10 items-center justify-center rounded-full ws-primary-bg text-sm font-bold text-white">
                {{ strtoupper(substr($testimonial->name, 0, 1)) }}
            </span>
        @endif
        <div>
            <p class="text-sm font-bold text-slate-900">{{ $testimonial->name }}</p>
            <p class="text-xs ws-secondary-text">{{ $testimonial->role ? $testimonial->role . ' - ' : '' }}{{ ucfirst($testimonial->type) }}</p>
        </div>
    </figcaption>
</figure>