{{--
    Search Result Section Component
    
    A container for grouping search result items with a header.
    
    @props
    - title: string - Section title
    - color: string - Color scheme (primary, warning, success, info)
    - icon: string - Icon name for the section header
    - count: int - Item count to display
    - animationDelay: int - Animation delay in ms - default: 0
    
    @slots
    - default: Result items
    - footer: Optional footer content (e.g., load more button)
    
    @example
    <x-ui.search-result.section 
        title="Projects" 
        color="primary" 
        icon="block-over" 
        :count="count($projects)"
    >
        @foreach($projects as $project)
            <x-ui.search-result.item ... />
        @endforeach
    </x-ui.search-result.section>
--}}

@props([
    'title' => '',
    'color' => 'primary',
    'icon' => 'file',
    'count' => 0,
    'animationDelay' => 0,
])

@php
    $gradientClass = match($color) {
        'primary' => 'bg-primary-gradient',
        'warning' => 'bg-warning-gradient',
        'success' => 'bg-success-gradient',
        'info' => 'bg-info-gradient',
        'danger' => 'bg-danger-gradient',
        default => 'bg-primary-gradient',
    };
    
    $sectionClass = "search-section-{$color}";
@endphp

<div 
    class="search-section" 
    style="--animation-delay: {{ $animationDelay }}ms;"
    {{ $attributes }}
>
    <div class="search-section-header {{ $sectionClass }}">
        <div class="section-icon-wrapper {{ $gradientClass }}">
            <x-ui.nicon :name="$icon"/>
        </div>
        <span class="section-title">{{ $title }}</span>
        <span class="section-count">{{ $count }}</span>
    </div>
    
    <div class="search-section-items">
        {{ $slot }}
    </div>
    
    @if(isset($footer) && $footer->isNotEmpty())
        {{ $footer }}
    @endif
</div>