@props(['comment', 'isReply' => false])

<div class="flex gap-3">
    <img src="https://ui-avatars.com/api/?name={{ urlencode($comment->author_name) }}&background=random" class="w-{{ $isReply ? '6' : '8' }} h-{{ $isReply ? '6' : '8' }} rounded-full bg-gray-200 flex-shrink-0">
    <div class="flex-1">
        <div class="{{ $isReply ? 'bg-gray-100 p-2.5' : 'bg-white p-3' }} rounded-lg border border-gray-200 shadow-sm">
            <div class="flex justify-between items-start">
                <span class="font-bold text-xs text-gray-900">{{ $comment->author_name }}</span>
                <span class="text-[10px] text-gray-400">{{ $comment->created_at->diffForHumans() }}</span>
            </div>
            <p class="text-sm text-gray-700 mt-1">{{ $comment->content }}</p>
        </div>
        
        <div class="flex items-center gap-4 mt-1 pl-1" 
             x-data="{ 
                likes: {{ $comment->likes_count }}, 
                isLiked: {{ $comment->isLikedBy(auth()->user()) ? 'true' : 'false' }},
                toggleLike() {
                    this.isLiked = !this.isLiked;
                    this.likes += this.isLiked ? 1 : -1;
                    fetch('/rate-my-pay/comments/{{ $comment->id }}/like', { method: 'POST', headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'} });
                }
             }">
            <button @click="toggleLike()" class="text-xs font-medium text-gray-500 hover:text-gray-800 flex items-center gap-1">
                <span x-text="isLiked ? 'Unlike' : 'Like'"></span>
                <span x-show="likes > 0" x-text="'(' + likes + ')'"></span>
            </button>
            @if(!$isReply)
                <button @click="replyToId = (replyToId === {{ $comment->id }} ? null : {{ $comment->id }})" class="text-xs font-medium text-gray-500 hover:text-gray-800">Reply</button>
            @endif
        </div>

        @if(!$isReply)
            <div x-show="replyToId === {{ $comment->id }}" class="mt-3 flex gap-2">
                <input x-ref="replyInput_{{ $comment->id }}" type="text" placeholder="Write a reply..." class="flex-1 border border-gray-300 rounded-md px-2 py-1 text-sm focus:ring-[#2F3D7E] focus:border-[#2F3D7E]">
                <button @click="submitComment({{ $comment->id }})" class="px-3 py-1 bg-[#2F3D7E] text-white text-xs rounded-md">Reply</button>
            </div>
        @endif
    </div>
</div>