import { Head, Link } from '@inertiajs/react';
import OnboardingController from '@/actions/App/Http/Controllers/OnboardingController';
import BrandingForm from '@/components/branding/branding-form';
import type { BrandingPageProps } from '@/types/branding';

export default function OnboardingBranding(props: BrandingPageProps) {
    return (
        <>
            <Head title="Brand your workspace" />
            <BrandingForm
                {...props}
                formAction={OnboardingController.storeBranding.form()}
                submitLabel="Save and continue"
                footer={
                    <Link
                        href={OnboardingController.connect()}
                        className="text-sm text-muted-foreground underline-offset-4 hover:underline"
                    >
                        Skip for now
                    </Link>
                }
            />
        </>
    );
}

OnboardingBranding.layout = {
    title: 'Brand your workspace',
    description:
        'Add your logo and pick colors and fonts. You can change these later in settings.',
};