<script lang="ts">
	import type { Exercice, Page } from '../../types/exo.type';
	import type { Writable } from 'svelte/store';
	import EditForm from './EditForm.svelte';

	export let cancel: Function;
	export let exos: Writable<{ isLoading: boolean; isFetching: boolean; data: Page }>;
	const updateExo = (e: Exercice) => {
		exos.update((o) => {
			return { ...o, data: { ...o.data, items: [e, ...o.data.items] } };
		});
	};
</script>

<div>
	<h1>Nouvel exercice</h1>
	<EditForm editing={false} {cancel} {updateExo} />
</div>

<style>
	div {
		background-color: blue;
		padding: 50px;
		display: flex;
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
	}
	h1 {
		font-size: 1.5em;
	}
</style>
