<template>
	<div>
		<!-- <Link href="/app">Home</Link>
		<br /> -->
		<h1>Register</h1>
		<form @submit.prevent="submit()" class="max-w-sm">
			<!-- <form @submit.prevent="form.post('/app/register')" class="max-w-sm"> -->
			<!-- <n-input type="email" v-model:value="form.email" placeholder="email" class="mb-3" />
			<n-input type="password" v-model:value="form.password" placeholder="Password" class="mb-3" /> -->
			<form-input v-bind:label="'Emai22l'" v-bind:type="'email'" v-model="form.email" />
			<form-input v-bind:label="'Password'" v-bind:type="'password'" v-model="form.password" />

			<n-button attr-type="submit"> Register </n-button>
		</form>
	</div>
</template>

<script>
// import AuthLayout from '../../Layouts/Auth.vue';
import AuthLayout from '@/Layouts/Auth.vue';
import { reactive } from 'vue';
import { useForm } from '@inertiajs/vue3';
import { Inertia } from '@inertiajs/inertia';
import { NButton, NInput } from 'naive-ui';
// import { useForm } from '@inertiajs/inertia-vue3'
import FormInput from '@/Components/FormInput.vue'

export default {
	layout: AuthLayout,

	components: {
		NButton,
		// NInput,
		FormInput
	},

	setup() {
		// const form = useForm({
		// 	email: '',
		// 	password: ''
		// });
		const form = reactive({
			email: null,
			password: null,
		});

		const submit = async () => {
			await Inertia.post('/app/register', form);
		};

		return { form, submit };
	},
};
</script>

<!-- <script setup>
import { Link } from '@inertiajs/vue3';
// import DefaultLayout from '../../Layouts/Default.vue';
</script> -->
