import { Head } from '@inertiajs/react';
import BrandingController from '@/actions/App/Http/Controllers/Settings/BrandingController';
import BrandingForm from '@/components/branding/branding-form';
import Heading from '@/components/heading';
import { edit as editBranding } from '@/routes/branding';
import type { BrandingLogoField, BrandingPageProps } from '@/types/branding';

export default function Branding(props: BrandingPageProps) {
    return (
        <>
            <Head title="Branding settings" />

            <h1 className="sr-only">Branding settings</h1>

            <div className="space-y-6">
                <Heading
                    variant="small"
                    title="Branding"
                    description="Upload your logo and choose the colors and fonts used across your workspace"
                />

                <BrandingForm
                    {...props}
                    formAction={BrandingController.update.form()}
                    submitLabel="Save branding"
                    removeLogoUrl={(type: BrandingLogoField) =>
                        BrandingController.destroyLogo.url({ type })
                    }
                />
            </div>
        </>
    );
}

Branding.layout = {
    breadcrumbs: [
        {
            title: 'Branding settings',
            href: editBranding(),
        },
    ],
};
