@props([
    'documents' => [],
    'lead_id' => null
])
<div class="flex flex-col">
    <h3 class="text-parrafo text-black mb-4">Documentos</h3>
    @if($documents && $documents->count() > 0)
        <div class="overflow-hidden border border-dashed border-accent p-4">
            <div class="overflow-x-auto min-h-[150px] pb-2">
                <div class="flex flex-nowrap gap-x-4">
                    @foreach ($documents as $document)
                        @php
                            $isImage = str_starts_with($document->mime_type, 'image/');
                            $filename = $document->file_name;
                            $extension = pathinfo($filename, PATHINFO_EXTENSION);
                            $basename = pathinfo($filename, PATHINFO_FILENAME);
                            $limited_basename = Str::limit($basename, 8, '...');
                            $display_name = $limited_basename . '.' . $extension;
                        @endphp
                        <div class="flex flex-col shrink-0 rounded-lg h-[150px] aspect-square overflow-hidden relative">
                            <a href="{{ route('documents.download', $document->id) }}" class="absolute top-2 right-4 w-[46px] h-[46px] rounded-lg flex justify-center items-center text-white bg-primary">
                                <x-icons.download />
                            </a>
                            @if($isImage)
                                @php
                                    $urlImg = asset('storage/' . $document->file_path);
                                @endphp
                                <img src="{{ $urlImg }}" alt="img adjunto" class="h-full w-full object-cover">
                            @else
                                <div class="h-full w-full bg-gray-200 flex justify-center items-center">
                                    <div class="flex flex-col items-center p-4 max-w-full">
                                        <x-icons.document />
                                        <p class="text-size-small-heading mt-2 text-black">{{ $display_name }}</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        @if($lead_id)
        <div class="mt-4">
            <x-buttons.button href="{{ route('documents.download-all-lead', $lead_id) }}" variant="add-outline" icon="download">Descargar todos los archivos</x-buttons.button>
        </div>
        @endif
    @else
        <p class="text-parrafo text-accent">Aún no hay archivos adjuntos.</p>
    @endif
</div>