<script lang="ts">
import { goto } from '$app/navigation';
import { m } from '$lib/paraglide/messages.js';
import BackButton from '$lib/shared/primitives/BackButton.svelte';
import TypeSelector from './TypeSelector.svelte';
import StoryCreate from './StoryCreate.svelte';
import JourneyCreate from './JourneyCreate.svelte';
import type { PageData } from './$types';

let { data }: { data: PageData } = $props();
</script>

<div class="mx-auto max-w-5xl px-4 py-8">
	<div class="mb-6">
		<BackButton />
	</div>

	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{m.geschichten_new_button()}</h1>

	{#if data.selectedType === 'STORY'}
		<StoryCreate initialPersons={data.initialPersons} />
	{:else if data.selectedType === 'JOURNEY'}
		<JourneyCreate />
	{:else}
		<TypeSelector onweiter={(type) => goto(`/geschichten/new?type=${type}`)} />
	{/if}
</div>
