import { Head } from '@inertiajs/react';
import { EmployeeCreateForm } from './employee-create-form';
import type {
    ContractTypeOption,
    DepartmentOption,
    JobPositionOption,
    ManagerOption,
    SiteOption,
    UserOption,
} from './employee-form';
import { dashboard } from '@/routes';
import { create, index } from '@/routes/admin/employees';

export default function EmployeesCreate({
    contractTypes,
    civilities,
    maritalStatuses,
    workTimes,
    professionalCategories,
    idDocumentTypes,
    users,
    managers,
    departments,
    sites,
    jobPositions,
}: {
    contractTypes: ContractTypeOption[];
    civilities: ContractTypeOption[];
    maritalStatuses: ContractTypeOption[];
    workTimes: ContractTypeOption[];
    professionalCategories: ContractTypeOption[];
    idDocumentTypes: ContractTypeOption[];
    users: UserOption[];
    managers: ManagerOption[];
    departments: DepartmentOption[];
    sites: SiteOption[];
    jobPositions: JobPositionOption[];
}) {
    return (
        <>
            <Head title="Nouveau collaborateur" />
            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <div className="w-full max-w-5xl">
                    <header className="mb-10">
                        <p className="mb-2 text-xs font-medium tracking-[0.14em] text-muted-foreground uppercase">
                            Collaborateurs
                        </p>
                        <h1 className="text-2xl font-semibold tracking-tight">
                            Nouveau collaborateur
                        </h1>
                        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                            Quelques informations pour ouvrir le dossier
                            administratif.
                        </p>
                    </header>

                    <EmployeeCreateForm
                        contractTypes={contractTypes}
                        civilities={civilities}
                        maritalStatuses={maritalStatuses}
                        workTimes={workTimes}
                        professionalCategories={professionalCategories}
                        idDocumentTypes={idDocumentTypes}
                        users={users}
                        managers={managers}
                        departments={departments}
                        sites={sites}
                        jobPositions={jobPositions}
                    />
                </div>
            </div>
        </>
    );
}

EmployeesCreate.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Collaborateurs', href: index() },
        { title: 'Créer', href: create() },
    ],
};
