{{-- 
Card Component
Usage:
<x-ui.layout.card>
    <x-slot name="header">Card Title</x-slot>
    Card content goes here
    <x-slot name="footer">Card Footer</x-slot>
</x-ui.layout.card>

<x-ui.layout.card>
    Simple card without header or footer
</x-ui.layout.card>
--}}

@props(['padding' => 'normal'])

@php
    $paddingClasses = [
        'none' => '',
        'small' => 'p-3',
        'normal' => 'p-4',
        'large' => 'p-6'
    ];
    
    $paddingClass = $paddingClasses[$padding] ?? $paddingClasses['normal'];
@endphp

<div {{ $attributes->merge(['class' => 'bg-background-elevated dark:bg-background-elevated overflow-hidden shadow-md rounded-lg border border-border dark:border-border']) }}>
    @if (isset($header))
        <div class="px-4 py-3 bg-neutral-50 dark:bg-neutral-700 border-b border-border dark:border-border">
            <h3 class="text-lg font-medium leading-6 text-text dark:text-text">
                {{ $header }}
            </h3>
        </div>
    @endif
    
    <div class="{{ $paddingClass }}">
        {{ $slot }}
    </div>
    
    @if (isset($footer))
        <div class="px-4 py-3 bg-neutral-50 dark:bg-neutral-700 border-t border-border dark:border-border">
            {{ $footer }}
        </div>
    @endif
</div>