@props(['comments'])

<div class="space-y-2">
    <h3 class="text-parrafo text-black mb-4">Comentarios</h3>

    @forelse ($comments as $comment)
        <div class="flex flex-col">
            <div class="flex items-center space-x-3">
                <div class="shrink-0">
                    <img class="h-8 w-8 rounded-full object-cover"
                        src="{{ $comment->user->profilePhotoUrl ?? asset('images/default-avatar.svg') }}"
                        alt="profile-img" />
                </div>

                <div class="flex-1 ml-2">
                    <div class="flex items-center space-x-2 text-size-small-heading">
                        <span class="text-black font-medium">{{ $comment->user->name }}</span>
                        <span class="text-accent">•</span>
                        <span class="text-accent">{{ $comment->created_at->diffForHumans() }}</span>
                    </div>
                    <p class="mt-1 text-accent text-size-small-heading font-medium">{{ $comment->body }}</p>
                </div>
            </div>
            @if ($comment->documents->isNotEmpty())
                <div class="mt-3 space-y-2">
                    @foreach ($comment->documents as $document)
                        @php
                            $isImage = str_starts_with($document->mime_type, 'image/');
                        @endphp
                        <div class="flex flex-col">
                            <p class="text-accent font-medium truncate text-size-small-heading">Archivo adjunto.</p>
                            @if($isImage)
                                @php
                                $urlImg = asset('storage/' . $document->file_path);
                                @endphp
                                <div class="mt-2 overflow-hidden rounded-md bg-gray-100">
                                    <img src="{{ $urlImg }}" alt="img adjunto" class="max-w-full">
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    @empty
        <p class="text-parrafo text-accent">Aún no hay comentarios para este Lead.</p>
    @endforelse
</div>