import AppLayout from '@/Layouts/AppLayout';
import { PageProps } from '@/types';
import { Head } from '@inertiajs/react';
import DeleteUserForm from './Partials/DeleteUserForm';
import UpdatePasswordForm from './Partials/UpdatePasswordForm';
import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm';

export default function Edit({
    mustVerifyEmail,
    status,
}: PageProps<{ mustVerifyEmail: boolean; status?: string }>) {
    return (
        <AppLayout>
            <Head title="Profil" />

            <div className="flex flex-col gap-6 max-w-xl">
                <h1 className="text-lg sm:text-xl font-bold text-gray-900">Profil</h1>
                <div className="bg-white border border-gray-200 rounded-xl p-4 sm:p-5 shadow-sm">
                    <UpdateProfileInformationForm
                        mustVerifyEmail={mustVerifyEmail}
                        status={status}
                        className="max-w-xl"
                    />
                </div>

                <div className="bg-white border border-gray-200 rounded-xl p-4 sm:p-5 shadow-sm">
                    <UpdatePasswordForm className="max-w-xl" />
                </div>

                <div className="bg-white border border-gray-200 rounded-xl p-4 sm:p-5 shadow-sm">
                    <DeleteUserForm className="max-w-xl" />
                </div>
            </div>
        </AppLayout>
    );
}
