@props(['title', 'name', 'image', 'message', 'iteration'])

@php 
    $delay = $iteration * 100; 
@endphp

<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="{{ $delay }}">
    <div class="card message-card h-100 d-flex justify-content-center align-items-center" data-aos="flip-up" data-aos-delay="{{ $delay + 50 }}">
         
        <img src="{{ asset($image) }}" class="card-img-top" alt="{{ $name }} Profile Picture" style="object-fit: cover;">
        
        <div class="card-body text-center" data-aos="fade-up" data-aos-delay="{{ $delay + 100 }}">
            <h2 class="card-title fw-bold mb-1 text-black" style="font-family: 'Poppins', sans-serif;">
                {{ $title }}
            </h2>
            <h3 style="font-family: 'Poppins', sans-serif; font-weight: 500;" class="mb-3 text-black">
                {{ $name }}
            </h3>
            <p class="card-text" style="font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 16px; text-align: justify; text-align-last: center;">
                {{ $message }}
            </p>
        </div>
    </div>
</div>