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

export default function BudgetsEdit({
    budget,
    accounts,
    departments,
}: {
    budget: BudgetFormData;
    accounts: AccountOption[];
    departments: DepartmentOption[];
}) {
    return (
        <>
            <Head title={`Modifier ${budget.label}`} />
            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <Heading title="Modifier le budget" description={budget.label} />
                <BudgetForm
                    accounts={accounts}
                    departments={departments}
                    budget={budget}
                    onCancel={() => router.get(show.url(budget.id))}
                />
            </div>
        </>
    );
}

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