<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames((['comment', 'isReply' => false]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter((['comment', 'isReply' => false]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

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

        <?php if(!$isReply): ?>
            <div x-show="replyToId === <?php echo e($comment->id); ?>" class="mt-3 flex gap-2">
                <input x-ref="replyInput_<?php echo e($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(<?php echo e($comment->id); ?>)" class="px-3 py-1 bg-[#2F3D7E] text-white text-xs rounded-md">Reply</button>
            </div>
        <?php endif; ?>
    </div>
</div><?php /**PATH /var/www/ratemypay_dev/resources/views/components/network/comment-item.blade.php ENDPATH**/ ?>