/* Sign in, sign up and business setup: one column, big fields, nothing else to load. */
import { Head } from '@inertiajs/react';
import type { ReactNode } from 'react';
import { usePage } from '@inertiajs/react';
import { AppLogo } from '../components/brand';
import type { SharedProps } from '../types';
import { FlashToast } from '../components/overlays';

export default function AuthLayout({ title, heading, intro, children }: { title: string; heading: string; intro?: ReactNode; children: ReactNode }) {
    const { appName } = usePage<SharedProps>().props;
    return (
        <>
            <Head title={`${title} · ${appName}`} />
            <FlashToast />
            <div className="flex min-h-screen flex-col items-center bg-gradient-to-b from-blue-50 via-violet-50 to-canvas px-4 py-8 sm:py-14">
                <AppLogo tagline />
                <div className="mt-6 w-full max-w-md rounded-3xl border border-line bg-white p-5 shadow-card sm:p-8">
                    <h1 className="text-2xl font-extrabold tracking-tight text-ink">{heading}</h1>
                    {intro && <p className="mt-1.5 text-sm text-muted">{intro}</p>}
                    <div className="mt-6">{children}</div>
                </div>
                <p className="mt-6 max-w-sm text-center text-xs text-muted">For shops, market stalls, salons, barbershops, kaunjika and every small business: record sales, keep stock, see your money.</p>
            </div>
        </>
    );
}
