Section Heading

<x-shopper::section-heading
    title="General Information"
    description="Basic details about the product including name, description, and pricing."
/>

<x-shopper::section-heading title="Pricing" />

<x-shopper::section-heading
    title="Inventory"
    description="Manage stock levels, SKU, and warehouse locations."
/>

<x-shopper::card
    title="Media"
    description="Upload images and videos for this product."
>
    <div class="...">
        <!-- File upload zone -->
    </div>
</x-shopper::card>

<div class="space-y-6">
    <x-shopper::section-heading
        title="Customer Details"
        description="Personal information and contact details."
    />

    <div class="grid grid-cols-2 gap-4">
        <!-- Form fields -->
    </div>

    <x-shopper::section-heading
        title="Shipping Address"
        description="Where orders will be delivered."
    />

    <div class="grid grid-cols-2 gap-4">
        <!-- Address fields -->
    </div>
</div>

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

<div {{ $attributes }}>
    <x-filament::section.heading class="font-heading font-semibold text-gray-950 dark:text-white">
        {{ $title }}
    </x-filament::section.heading>

    @if ($description)
        <x-filament::section.description class="mt-1 text-sm text-gray-500 dark:text-gray-400 max-w-2xl">
            {{ $description }}
        </x-filament::section.description>
    @endif
</div>