@props(['content', 'class' => ''])

@php
    $flexDirection = match($content->layout) {
        'row' => 'flex flex-col sm:flex-row gap-6',
        'row-reverse' => 'flex flex-col sm:flex-row-reverse gap-6',
        'col-reverse' => 'flex flex-col-reverse gap-6',
        default => 'flex flex-col gap-6',
    };
@endphp

<div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-xl overflow-hidden {{ $class }}">
    <div class="p-6">
        <div class="{{ $flexDirection }} items-start">
            {{-- Content Section --}}
            <div class="flex-1 min-w-0">
                <h3 class="text-xl font-semibold text-gray-900 mb-3">
                    {{ $content->title }}
                </h3>
                <div class="text-gray-700 whitespace-pre-wrap mb-4">
                    {{ $content->content }}
                </div>
                
                {{-- Meta Information --}}
                <div class="flex flex-wrap gap-3 text-sm text-gray-500 mb-4">
                    <span class="px-2 py-1 rounded-full bg-gray-100 text-gray-800">
                        {{ $content->type }}
                    </span>
                    <span class="px-2 py-1 rounded-full {{ $content->status === 'published' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                        {{ $content->status }}
                    </span>
                    @if($content->layout)
                    <span class="px-2 py-1 rounded-full bg-blue-100 text-blue-800">
                        Layout: {{ $content->layout }}
                    </span>
                    @endif
                </div>

                {{-- Action Button --}}
                <a href="{{ route('sites.contents.show', [$content->site, $content]) }}" class="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-md hover:bg-blue-700 transition-colors">
                    Detayları Gör
                </a>
            </div>

            {{-- Media Section --}}
            @if($content->media->count() > 0)
            <div class="w-full sm:w-1/3 flex-shrink-0">
                @php $firstMedia = $content->media->first(); @endphp
                @if(str_contains($firstMedia->file_type, 'image'))
                <div class="relative rounded-lg overflow-hidden bg-gray-100">
                    <img src="{{ Storage::url($firstMedia->file_path) }}" 
                         alt="{{ $firstMedia->alt_text ?? $firstMedia->name }}" 
                         class="w-full h-48 object-cover">
                    @if($content->media->count() > 1)
                    <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
                        +{{ $content->media->count() - 1 }} daha
                    </div>
                    @endif
                </div>
                @else
                <div class="w-full h-48 bg-gray-100 rounded-lg flex items-center justify-center">
                    <div class="text-center">
                        <i class="fas fa-file text-4xl text-gray-400 mb-2"></i>
                        <p class="text-xs text-gray-600">{{ $firstMedia->name }}</p>
                    </div>
                </div>
                @endif
            </div>
            @endif
        </div>

        {{-- Additional Media Grid (if more than 1) --}}
        @if($content->media->count() > 1)
        <div class="mt-6 pt-6 border-t border-gray-200">
            <h4 class="text-sm font-medium text-gray-900 mb-3">Diğer Medyalar</h4>
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                @foreach($content->media->skip(1)->take(4) as $media)
                <div class="relative rounded-lg overflow-hidden bg-gray-100 aspect-square">
                    @if(str_contains($media->file_type, 'image'))
                    <img src="{{ Storage::url($media->file_path) }}" 
                         alt="{{ $media->alt_text ?? $media->name }}" 
                         class="w-full h-full object-cover">
                    @else
                    <div class="w-full h-full flex items-center justify-center">
                        <i class="fas fa-file text-2xl text-gray-400"></i>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
            @if($content->media->count() > 5)
            <p class="text-xs text-gray-500 mt-2 text-center">
                +{{ $content->media->count() - 5 }} medya daha
            </p>
            @endif
        </div>
        @endif
    </div>
</div>