import { Head } from '@inertiajs/react';
import DeleteUserForm from './Partials/DeleteUserForm';
import UpdatePasswordForm from './Partials/UpdatePasswordForm';
import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm';
import AppLayout from "@/Layouts/AppLayout.jsx";
import { BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from "@/components/ui/breadcrumb.jsx";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function Edit({ auth, mustVerifyEmail, status, timezones }) {
    return (
        <AppLayout auth={ auth } header={
            <>
                <BreadcrumbSeparator />
                    <BreadcrumbItem>
                    <BreadcrumbLink>Profile</BreadcrumbLink>
                </BreadcrumbItem>
            </>
        }>
            <Head title="Profile" />
            <div className="py-3">
                <Tabs defaultValue="profile" className="mx-auto max-w-7xl space-y-6 sm:px-6 lg:px-8">
                    <TabsList className="grid w-full grid-cols-3">
                        <TabsTrigger value="profile">Profile Information</TabsTrigger>
                        <TabsTrigger value="password">Update Password</TabsTrigger>
                        <TabsTrigger value="deleteAccount">Delete Account</TabsTrigger>
                    </TabsList>
                    <TabsContent value="profile">
                        <UpdateProfileInformationForm
                            mustVerifyEmail={ mustVerifyEmail }
                            status={ status } timezones={ timezones }
                        />
                    </TabsContent>
                    <TabsContent value="password">
                        <UpdatePasswordForm />
                    </TabsContent>
                    <TabsContent value="deleteAccount">
                        <DeleteUserForm />
                    </TabsContent>
                </Tabs>
            </div>
        </AppLayout>
    );
}
