@props(['steps' => [], 'currentStep' => 1, 'showNavigation' => true])

<div x-data="{ step: {{ $currentStep }} }">
    {{-- Step indicator --}}
    <x-rp-stepper :steps="$steps" :currentStep="$currentStep" />

    {{-- Step content --}}
    <div class="mt-6">
        @foreach($steps as $index => $step)
            <div x-show="step === {{ $index + 1 }}" x-transition class="space-y-4">
                @if(isset($step['content']))
                    {!! $step['content'] !!}
                @endif
            </div>
        @endforeach
    </div>

    {{-- Navigation --}}
    @if($showNavigation)
        <div class="flex items-center justify-between mt-6 pt-4 border-t border-slate-200 dark:border-slate-700">
            <button x-show="step > 1" @click="step--" class="px-4 py-2 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 text-sm font-semibold rounded-lg transition-colors">
                {{ __('Previous') }}
            </button>
            <div x-show="step <= 1"></div>
            <button x-show="step < {{ count($steps) }}" @click="step++" class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white text-sm font-semibold rounded-lg transition-colors">
                {{ __('Next') }}
            </button>
            <button x-show="step === {{ count($steps) }}" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-lg transition-colors">
                {{ __('Submit') }}
            </button>
        </div>
    @endif
</div>