<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import UserForm from '@/components/UserForm.vue';
import type { UserFormData } from '@/components/UserForm.vue';
import Heading from '@/components/Heading.vue';
import AppLayout from '@/layouts/AppLayout.vue';
import type { BreadcrumbItem } from '@/types';

type Props = {
    indexUrl: string;
    storeUrl: string;
    userGroups: Record<string, string>;
};

const props = defineProps<Props>();

const form = useForm<UserFormData>({
    name: '',
    email: '',
    password: '',
    password_confirmation: '',
    group: 'user',
});

function submit() {
    form.post(props.storeUrl);
}
</script>

<template>
    <AppLayout
        :breadcrumbs="[
            { title: 'Users', href: props.indexUrl },
            { title: 'Create user' },
        ]"
    >
        <Head title="Create user" />

        <div class="flex flex-col space-y-6 p-4">
            <Heading
                title="Create user"
                description="Add a new user to the system"
            />
            <UserForm
                :form="form"
                :user-groups="userGroups"
                :show-password-fields="true"
                submit-label="Create user"
                @submit="submit"
            />
        </div>
    </AppLayout>
</template>
