import UserForm from '@/components/all-forms/UserForm';
import AppLayout from '@/layouts/app-layout';
import { User } from '@/types/global';
import { Head, usePage } from '@inertiajs/react';
import type { ReactNode } from 'react';
interface Role {
    id: number;
    name: string;
}

const Edit = ({ user }: { user: User }) => {
    const { roles } = usePage().props as any;

    return (
        <>
            <Head title="Edit User" />
            <UserForm user={user} roles={roles} isEditing={true} />
        </>
    );
};

Edit.layout = (page: ReactNode & { props: { user: User } }) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Users', href: route('users.index') },
            { title: 'Edit', href: route('users.edit', page.props.user.id) },
        ]}
        title="Edit User"
    >
        {page}
    </AppLayout>
);

export default Edit;
