"use client";

import { LogIn } from "lucide-react";
import Link from "next/link";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/providers/auth-provider";

export function UserNavMobile() {
	const { user, isAuthenticated, isLoading } = useAuth();

	if (isLoading) {
		return <div className="h-8 w-8 rounded-full bg-zinc-200 animate-pulse" />;
	}

	if (!isAuthenticated || !user) {
		return (
			<Button variant="ghost" size="icon" asChild className="h-9 w-9">
				<Link href="/login">
					<LogIn className="h-5 w-5" />
				</Link>
			</Button>
		);
	}

	return (
		<Button variant="ghost" size="icon" asChild className="h-9 w-9 p-0">
			<Link href="/profile">
				<Avatar className="h-8 w-8 border">
					<AvatarImage src={user.avatarUrl} alt={user.username} />
					<AvatarFallback>{user.username.slice(0, 2).toUpperCase()}</AvatarFallback>
				</Avatar>
			</Link>
		</Button>
	);
}