import { auth, signOut } from '@/auth';
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

export default async function DashboardPage() {
    const session = await auth();

    return (
        <div className="flex flex-col min-h-screen p-8 bg-neutral-50 dark:bg-neutral-950">
            <header className="flex justify-between items-center bg-white dark:bg-neutral-900 shadow-sm p-4 rounded-lg mb-8">
                <h1 className="text-xl font-bold">Dashboard</h1>
                <div className="flex gap-4 items-center">
                    <p className="text-sm font-medium">Logged in as: {session?.user?.email}</p>
                    <form
                        action={async () => {
                            'use server';
                            await signOut();
                        }}
                    >
                        <Button variant="outline">Sign out</Button>
                    </form>
                </div>
            </header>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <Card>
                    <CardHeader>
                        <CardTitle>Total Balance</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <p className="text-3xl font-bold">$124,500.00</p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader>
                        <CardTitle>Monthly Spend</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <p className="text-3xl font-bold text-red-600">-$24,300.00</p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader>
                        <CardTitle>Pending Approvals</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <p className="text-3xl font-bold text-yellow-600">5</p>
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}