@props([
    'title' => '',
    'icon' => '',
    'variant' => 'default',
    'borderColor' => 'border-light',
    'headerClass' => '',
    'bodyClass' => '',
    'iconColor' => 'text-primary'
])

@php
    $classes = [
        'section-card',
        'border',
        $borderColor,
        'rounded-3',
        'h-100',
        'bg-white'
    ];
@endphp

<div {{ $attributes->merge(['class' => implode(' ', $classes)]) }}>
    @if($title || $icon)
        <div class="section-card-header d-flex align-items-center {{ $headerClass }}">
            <div class="d-flex align-items-center flex-grow-1">
                @if($icon)
                    <div class="section-icon me-3">
                        <x-ui.nicon :name="$icon" class="{{ $iconColor }}" />
                    </div>
                @endif
                @if($title)
                    <h6 class="section-title mb-0 text-dark fw-semibold">{{ $title }}</h6>
                @endif
            </div>
            @isset($headerActions)
                <div class="section-actions ms-auto">
                    {{ $headerActions }}
                </div>
            @endisset
        </div>
        <hr class="section-divider my-3">
    @endif
    
    <div class="section-card-body {{ $bodyClass }}">
        {{ $slot }}
    </div>
</div>