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

<div class="rounded-3xl p-5 shadow-[0_10px_30px_rgba(15,23,42,0.05)] {{ $bgClass }} transition-transform hover:-translate-y-1 hover:shadow-[0_15px_40px_rgba(15,23,42,0.08)] w-full min-h-[180px]" style="{{ $style }}">
    <h4 class="text-center font-black text-[18px] {{ $titleColorClass }} uppercase tracking-wider mb-3">
        @if(str_contains($title, 'GREAT JOB'))
            <span class="opacity-40 text-[16px] mr-1">✨</span>{{ $title }}<span class="opacity-40 text-[16px] ml-1">✨</span>
        @elseif(str_contains($title, 'YOU ROCK'))
            <span class="opacity-40 text-[16px] mr-1">🌟</span>{{ $title }}<span class="opacity-40 text-[16px] ml-1">🌟</span>
        @else
            <span class="opacity-40 text-[16px] mr-1">💖</span>{{ $title }}<span class="opacity-40 text-[16px] ml-1">💖</span>
        @endif
    </h4>
    <p class="text-left text-[14px] text-[#4B5563] font-medium leading-[1.8] italic px-2">
        "{{ $message }}"
    </p>
</div>