import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useLogin } from "@/state/user";
import { Redirect } from "wouter";

export function ProfilePage() {
    const userInfo = useLogin();
    if (!userInfo) {
        console.error("User session expired. Redirecting to login page.");
        return <Redirect to="/login" />;
    }
    // TODO: Add a logout button
    // TODO: Add a change password button
    return (
        <div className="p-4">
            <Card>
                <CardHeader>
                    <CardTitle className="text-2xl">Profile</CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="grid">
                        <span className="text-muted-foreground text-sm">Username</span>
                        <span className="text-primary text-lg">{userInfo.username}</span>
                    </div>
                    <div className="grid">
                        <span className="text-muted-foreground text-sm">Permission</span>
                        <span className="text-primary text-lg">{userInfo.permission.length > 1 ? userInfo.permission.join(",") : "N/A"}</span>
                    </div>
                </CardContent>
            </Card>
        </div>
    )
}

export default ProfilePage;