import { Head, Link, usePage } from '@inertiajs/react';
import AppLogoIcon from '@/components/app-logo-icon';
import { Button } from '@/components/ui/button';
import { dashboard, login } from '@/routes';

export default function Welcome() {
    const { auth, name } = usePage<{ name: string }>().props;

    return (
        <>
            <Head title="Welcome" />
            <div className="flex min-h-screen flex-col items-center justify-center gap-8 bg-background p-6 text-foreground">
                <div className="flex flex-col items-center gap-4 text-center">
                    <div className="flex size-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
                        <AppLogoIcon className="size-9 fill-current" />
                    </div>
                    <h1 className="font-heading text-3xl font-semibold text-primary">
                        {name}
                    </h1>
                    <p className="max-w-md text-sm text-muted-foreground">
                        Secure legal practice management for the firm — matters,
                        litigation, billing, documents and more, in one place.
                    </p>
                </div>

                <Button asChild size="lg">
                    <Link href={auth.user ? dashboard() : login()}>
                        {auth.user ? 'Go to dashboard' : 'Log in'}
                    </Link>
                </Button>
            </div>
        </>
    );
}
