@props([
    'title'   => '',
    'padding' => true,
])

@aware(['title'])

<div {{ $attributes->merge(['class' => 'bg-white rounded-xl shadow-sm border border-gray-100']) }}>

    @isset($header)
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            @if($title)
                <h3 class="text-base font-semibold text-gray-900">{{ $title }}</h3>
            @endif
            {{ $header }}
        </div>
    @else
        @if($title)
            <div class="px-6 py-4 border-b border-gray-100">
                <h3 class="text-base font-semibold text-gray-900">{{ $title }}</h3>
            </div>
        @endif
    @endisset

    <div @class(['p-6' => $padding])>
        {{ $slot }}
    </div>

    @isset($footer)
        <div class="px-6 py-4 border-t border-gray-100">
            {{ $footer }}
        </div>
    @endisset

</div>