Card

<x-shopper::card title="Card Title" description="Optional description text">
    <p>Your content goes here</p>
</x-shopper::card>

<x-shopper::card>
    <p>A simple card without title or description.</p>
</x-shopper::card>

<x-shopper::card title="Product Information">
    <p>Display product details in an organized manner.</p>
</x-shopper::card>

<x-shopper::card>
    <x-slot:title>
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold">Custom Title</h3>
            <x-filament::button size="sm">Action</x-filament::button>
        </div>
    </x-slot:title>

    <p>Card content with custom header.</p>
</x-shopper::card>

<x-shopper::card title="Account Settings" description="Update your account information below.">
    <div class="space-y-4">
        <div>
            <x-shopper::label for="name">Name</x-shopper::label>
            <x-shopper::forms.input name="name" placeholder="John Doe" />
        </div>
        <div>
            <x-shopper::label for="email">Email</x-shopper::label>
            <x-shopper::forms.input type="email" name="email" placeholder="john@example.com" />
        </div>
    </div>
</x-shopper::card>

@props([
    'title' => null,
    'description' => null,
])

<div
    {{ $attributes->twMerge(['class' => 'sh-card p-1.5 bg-gray-50 dark:bg-gray-950 rounded-lg ring-1 ring-gray-200 dark:ring-white/10 overflow-hidden']) }}
>
    @if ($title)
        <header class="sh-card-header px-2 py-3">
            @if ($title instanceof \Illuminate\View\ComponentSlot)
                {{ $title }}
            @else
                <x-shopper::section-heading :$title :$description />
            @endif
        </header>
    @endif

    <div class="sh-card-content bg-white dark:bg-gray-900 ring-1 ring-gray-200 rounded-lg dark:ring-white/10 p-4 overflow-hidden">
        {{ $slot }}
    </div>
</div>