import { Head, Link, usePage } from '@inertiajs/react';
import { SharedProps } from '@/types';

export default function Home() {
    const { auth } = usePage<SharedProps>().props;

    return (
        <div className="min-h-screen bg-gray-950 text-gray-100">
            <Head title="Welcome" />

            <nav className="mx-auto flex max-w-6xl items-center justify-between px-4 py-6">
                <span className="text-xl font-bold">EmpireRP UCP</span>
                <div className="flex items-center gap-4">
                    <Link href={route('news.index')} className="text-sm text-gray-300 hover:text-white">
                        News
                    </Link>
                    {auth.user ? (
                        <Link
                            href={route('dashboard')}
                            className="rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700"
                        >
                            Dashboard
                        </Link>
                    ) : (
                        <Link
                            href={route('login')}
                            className="rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700"
                        >
                            Log in
                        </Link>
                    )}
                </div>
            </nav>

            <header className="mx-auto max-w-6xl px-4 py-24 text-center">
                <h1 className="text-4xl font-bold sm:text-5xl">Welcome to EmpireRP</h1>
                <p className="mx-auto mt-4 max-w-xl text-gray-400">
                    Manage your characters, vehicles, houses and more from the community dashboard.
                </p>
            </header>
        </div>
    );
}
