@props(['title', 'message', 'isLiked' => false, 'bgClass', 'titleColorClass', 'textColorClass'])

<div class="rounded-[20px] p-5 border border-gray-100 shadow-sm {{ $bgClass }} transition-transform hover:-translate-y-1 hover:shadow-lg w-full">
    <h4 class="text-center font-black text-[18px] text-[#1E293B] uppercase tracking-wider mb-3">
        @if(str_contains($title, 'GREAT JOB'))
            ✨ {{ $title }} ✨
        @elseif(str_contains($title, 'YOU ROCK'))
            🌟 {{ $title }} 🌟
        @else
            💖 {{ $title }} 💖
        @endif
    </h4>
    <p class="text-left text-[13px] text-[#475569] font-semibold leading-relaxed italic px-2">
        "{{ $message }}"
    </p>
</div>