import UserForm from '@/components/all-forms/UserForm';
import AppLayout from '@/layouts/app-layout';
import { Head, usePage } from '@inertiajs/react';
import type { ReactNode } from 'react';

interface Role {
    id: number;
    name: string;
}

const Create = () => {
    const { roles } = usePage().props as any;

    return (
        <>
            <Head title="Create User" />
            <UserForm roles={roles} isEditing={false} />
        </>
    );
};

Create.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Users', href: route('users.index') },
            { title: 'Create', href: route('users.create') },
        ]}
        title="Create User"
    >
        {page}
    </AppLayout>
);

export default Create;
