@props(['theme', 'isActive' => false])

<div class="relative bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 overflow-hidden border-2 {{ $isActive ? 'border-green-500' : 'border-gray-200' }}">
    
    {{-- Active Theme Badge --}}
    @if($isActive)
        <div class="absolute top-2 right-2 z-10">
            <span class="px-2 py-1 bg-green-500 text-white text-xs font-medium rounded-full">
                <i class="fas fa-check mr-1"></i>
                Active
            </span>
        </div>
    @endif
    
    {{-- Theme Header Preview --}}
    <div class="h-20 relative overflow-hidden" 
         style="background: {{ $theme->background_card_hero ?? $theme->primary_color }};">
        
        {{-- Gradient Overlay for Better Text Visibility --}}
        <div class="absolute inset-0 bg-gradient-to-r from-black/20 to-transparent"></div>
        
        {{-- Sample Header Content --}}
        <div class="absolute inset-0 flex items-center justify-between px-4">
            <div class="flex items-center">
                <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">
                    <i class="fas fa-palette text-white text-sm"></i>
                </div>
                <span class="ml-2 text-white font-medium text-sm" 
                      style="font-family: {{ $theme->font_family_heading }};">
                    {{ $theme->name }}
                </span>
            </div>
            <div class="flex gap-1">
                <div class="w-2 h-2 rounded-full bg-white/40"></div>
                <div class="w-2 h-2 rounded-full bg-white/40"></div>
                <div class="w-2 h-2 rounded-full bg-white/40"></div>
            </div>
        </div>
    </div>
    
    {{-- Theme Content Preview --}}
    <div class="p-4" style="background-color: {{ $theme->background_card }};">
        
        {{-- Theme Name and Description --}}
        <div class="mb-3">
            <h3 class="font-semibold text-lg mb-1" 
                style="color: {{ $theme->font_color_heading }}; font-family: {{ $theme->font_family_heading }};">
                {{ $theme->name }}
            </h3>
            <p class="text-sm" 
               style="color: {{ $theme->font_color_body }}; font-family: {{ $theme->font_family_body }};">
                {{ $theme->description ?? 'A beautiful theme for your application' }}
            </p>
        </div>
        
        {{-- Color Palette Preview --}}
        <div class="mb-4">
            <div class="flex gap-2 mb-2">
                <div class="w-6 h-6 rounded-full border border-gray-200" 
                     style="background-color: {{ $theme->primary_color }};"
                     title="Primary Color"></div>
                @if($theme->secondary_color)
                    <div class="w-6 h-6 rounded-full border border-gray-200" 
                         style="background-color: {{ $theme->secondary_color }};"
                         title="Secondary Color"></div>
                @endif
                @if($theme->accent_color)
                    <div class="w-6 h-6 rounded-full border border-gray-200" 
                         style="background-color: {{ $theme->accent_color }};"
                         title="Accent Color"></div>
                @endif
            </div>
            <span class="text-xs" style="color: {{ $theme->font_color_body }};">Color Palette</span>
        </div>
        
        {{-- Sample UI Elements --}}
        <div class="space-y-2">
            {{-- Sample Button --}}
            <div class="flex gap-2">
                <button class="px-3 py-1 rounded text-white text-xs font-medium" 
                        style="background-color: {{ $theme->primary_color }};">
                    Primary
                </button>
                @if($theme->secondary_color)
                    <button class="px-3 py-1 rounded text-white text-xs font-medium" 
                            style="background-color: {{ $theme->secondary_color }};">
                        Secondary
                    </button>
                @endif
            </div>
            
            {{-- Sample Link --}}
            <div>
                <a href="#" class="text-xs underline" 
                   style="color: {{ $theme->font_color_link }}; font-family: {{ $theme->font_family_body }};">
                    Sample Link Text
                </a>
            </div>
            
            {{-- Sample Divider --}}
            <div class="my-2">
                <hr style="border-color: {{ $theme->divider_color ?? '#e5e7eb' }}; 
                           border-style: {{ $theme->divider_style ?? 'solid' }}; 
                           border-width: {{ $theme->divider_width ?? '1px' }} 0 0 0;">
            </div>
            
            {{-- Sample Card --}}
            <div class="p-2 rounded border text-xs" 
                 style="background-color: {{ $theme->background_body }}; 
                        border-color: {{ $theme->divider_color ?? '#e5e7eb' }};">
                <div class="font-medium mb-1" 
                     style="color: {{ $theme->font_color_heading }}; font-family: {{ $theme->font_family_heading }};">
                    Sample Card
                </div>
                <div style="color: {{ $theme->font_color_body }}; font-family: {{ $theme->font_family_body }};">
                    Card content preview
                </div>
            </div>
        </div>
        
        {{-- Typography Preview --}}
        <div class="mt-3 pt-3 border-t" style="border-color: {{ $theme->divider_color ?? '#e5e7eb' }};">
            <div class="text-xs" style="color: {{ $theme->font_color_body }};">
                <span class="font-medium">Fonts:</span>
                <span style="font-family: {{ $theme->font_family_heading }};">{{ explode(',', $theme->font_family_heading)[0] }}</span>
                /
                <span style="font-family: {{ $theme->font_family_body }};">{{ explode(',', $theme->font_family_body)[0] }}</span>
            </div>
        </div>
    </div>
    
    {{-- Hover Overlay --}}
    <div class="absolute inset-0 bg-blue-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none"></div>
</div>