import { Head, router } from '@inertiajs/react';
import Heading from '@/components/heading';
import { dashboard } from '@/routes';
import { create, index } from '@/routes/admin/budgets';
import { BudgetForm } from './budget-form';
import type { AccountOption, DepartmentOption } from './budget-form';

export default function BudgetsCreate({
    accounts,
    departments,
    defaultFiscalYear,
}: {
    accounts: AccountOption[];
    departments: DepartmentOption[];
    defaultFiscalYear: number;
}) {
    return (
        <>
            <Head title="Nouveau budget" />
            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <Heading
                    title="Nouveau budget"
                    description="Créer un budget prévisionnel en brouillon"
                />
                <BudgetForm
                    accounts={accounts}
                    departments={departments}
                    defaultFiscalYear={defaultFiscalYear}
                    onCancel={() => router.get(index.url())}
                />
            </div>
        </>
    );
}

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