import { Head, router } from '@inertiajs/react';
import Heading from '@/components/heading';
import { index } from '@/routes/admin/projects';
import { dashboard } from '@/routes';
import {
    ProjectForm,
    type CustomerOption,
    type ProjectFormData,
    type StatusOption,
    type UserOption,
} from './project-form';

export default function ProjectsEdit({
    project,
    customers,
    users,
    statuses,
}: {
    project: ProjectFormData;
    customers: CustomerOption[];
    users: UserOption[];
    statuses: StatusOption[];
}) {
    return (
        <>
            <Head title={`Modifier ${project.name}`} />

            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <Heading
                    title="Modifier le projet"
                    description="Mettre à jour les informations, jalons et équipe"
                />

                <ProjectForm
                    customers={customers}
                    users={users}
                    statuses={statuses}
                    project={project}
                    onCancel={() => router.get(index.url())}
                />
            </div>
        </>
    );
}

ProjectsEdit.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Projets classiques', href: index() },
        { title: 'Modifier', href: '#' },
    ],
};
