import { Head } from '@inertiajs/react';
import { UserRoundPen } from 'lucide-react';
import { InstallerForm } from '@/components/crm/installer-form';
import { PageHeader } from '@/components/crm/page-header';
import { index as installersIndex } from '@/routes/installers';
import type { InstallerDetail, InstallerFormOptions } from '@/types';

export default function InstallersEdit({
    installer,
    options,
}: {
    installer: InstallerDetail;
    options: InstallerFormOptions;
}) {
    return (
        <>
            <Head title={`Edit ${installer.display_name}`} />

            <PageHeader
                eyebrow={
                    <>
                        <UserRoundPen className="size-3.5 text-solar" />
                        <span className="font-mono">
                            {installer.installer_number}
                        </span>
                    </>
                }
                title={`Edit ${installer.display_name}`}
                description="Correct a licence number, add a missing certificate, or record that a crew is no longer used."
            />

            <InstallerForm installer={installer} options={options} />
        </>
    );
}

InstallersEdit.layout = {
    breadcrumbs: [
        { title: 'Installers', href: installersIndex() },
        { title: 'Edit installer', href: installersIndex() },
    ],
};