@props(['testimonial'])

<div class="rounded-2xl border border-ink-900/5 bg-white p-7">
    <div class="flex gap-1 text-gold-500">
        @for($i = 0; $i < $testimonial->rating; $i++)
            <x-sitebuilder.app-icon name="star" class="h-4 w-4" />
        @endfor
    </div>
    <p class="mt-4 text-sm leading-relaxed text-ink-800/75">&ldquo;{{ $testimonial->content }}&rdquo;</p>
    <div class="mt-6 flex items-center gap-3 border-t border-ink-900/5 pt-4">
        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-brand-100 font-display font-semibold text-brand-700">
            {{ mb_substr($testimonial->name, 0, 1) }}
        </span>
        <div>
            <p class="text-sm font-semibold text-ink-900">{{ $testimonial->name }}</p>
            <p class="text-xs text-ink-800/50">{{ $testimonial->meta }}</p>
        </div>
    </div>
</div>