@props(['comment', 'document'])

<div class="border-l-2 border-blue-200 pl-3 ml-2" style="margin-left: {{ $comment->depth * 20 }}px">
    <div class="flex items-start space-x-2">
        <div class="flex-1">
            <div class="text-sm font-medium">{{ $comment->user->name }}</div>
            <div class="text-gray-600 text-sm">{{ $comment->created_at->diffForHumans() }}</div>
            <p class="mt-1 text-gray-800">{{ $comment->content }}</p>
            <div class="mt-1 text-xs text-blue-600 cursor-pointer hover:underline"
                 @click="window.PDFViewer.scrollToComment({{ $comment->page }}, {{ $comment->x }}, {{ $comment->y }})">
                Página {{ $comment->page }} - ({{ number_format($comment->x*100, 1) }}%, {{ number_format($comment->y*100, 1) }}%)
            </div>
        </div>
    </div>
    
    @if($comment->children->isNotEmpty())
        <div class="mt-2 space-y-2">
            @foreach($comment->children as $child)
                <x-comment-item :comment="$child" :document="$document" />
            @endforeach
        </div>
    @endif
</div>