<script>
	import { Stepper, Step } from '@skeletonlabs/skeleton';

	let step = 1;
	let name = '';
	let age = '';
	let flowData = {};

	const handleNextStep = () => {
		if (step === 1 && name.trim() === '') {
			alert('Please enter a valid name.');
			return;
		}

		if (step === 2 && age.trim() === '') {
			alert('Please enter a valid age.');
			return;
		}

		step += 1;
	};

	const handlePrevStep = () => {
		step -= 1;
	};

	const handleConfirm = () => {
		flowData = {
			name,
			age
		};
		alert('Flow data confirmed: ' + JSON.stringify(flowData));
	};

	const handleReset = () => {
		step = 1;
		name = '';
		age = '';
		flowData = {};
	};
</script>

<Stepper start={step - 1}>
	<Step>
		<svelte:fragment slot="header">Step 1: Name</svelte:fragment>
		<div>
			<label for="name">Name:</label>
			<input class="text-black" type="text" id="name" bind:value={name} />
		</div>
		<div slot="navigation">
			<button class="btn variant-ghost" on:click={handleNextStep}>Next</button>
		</div>
	</Step>
	<Step>
		<svelte:fragment slot="header">Step 2: Age</svelte:fragment>
		<div>
			<label for="age">Age:</label>
			<input class="text-black" type="number" id="age" bind:value={age} />
		</div>
		<div slot="navigation">
			<button class="btn variant-ghost" on:click={handlePrevStep}>Previous</button>
			<button class="btn variant-ghost" on:click={handleNextStep}>Next</button>
		</div>
	</Step>
	<Step>
		<svelte:fragment slot="header">Step 3: Confirm Summary</svelte:fragment>
		<div>
			<h3>Confirm Summary:</h3>
			<p>Name: {name}</p>
			<p>Age: {age}</p>
		</div>
		<div slot="navigation">
			<button class="btn variant-ghost" on:click={handlePrevStep}>Previous</button>
			<button class="btn variant-ghost-primary" on:click={handleConfirm}>Confirm</button>
		</div>
	</Step>
</Stepper>

<button on:click={handleReset}>Reset</button>
