@props([
    'title' => '',
    'description' => '',
    'hasUnsavedChanges' => false,
    'saveAction' => 'save'
])

<div class="mb-6 flex items-start justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold">{{ $title }}</h1>
        <p class="text-neutral-600 dark:text-neutral-400">{{ $description }}</p>
    </div>

    <div class="flex items-center gap-2">
        @if($hasUnsavedChanges)
            <span class="text-sm text-amber-600 dark:text-amber-400">
                <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
                Unsaved changes
            </span>
        @endif

        <button type="button" wire:click="cancel"
            class="inline-flex items-center gap-1 rounded-md border border-neutral-300 bg-white px-2.5 py-1.5 text-sm font-medium text-neutral-700 shadow-sm hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700">
            Cancel
        </button>

        <button type="button" wire:click="{{ $saveAction }}"
            class="inline-flex items-center gap-1 rounded-md bg-neutral-900 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100">
            <span wire:loading.remove wire:target="{{ $saveAction }}">Save Changes</span>
            <span wire:loading wire:target="{{ $saveAction }}">Saving...</span>
        </button>
    </div>
</div>