"use client";

import React from "react";
import LazyLoadedImage from "./lazyLoadedImage";
import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
import { OctagonXIcon } from "lucide-react";
import { RobloxPremiumSmall, RobloxVerifiedSmall } from "./RobloxTooltipStuff";
import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
import { Skeleton } from "./ui/skeleton";

export function HomeLoggedInHeader() {
	const profile = useCurrentAccount();

	if (profile === false) {
		return (
			<div className="justify-center w-screen px-8 py-6">
				<Alert variant="destructive" className="space-x-2">
					<OctagonXIcon />
					<AlertTitle>Failed to fetch account info</AlertTitle>
					<AlertDescription>
						Please make sure <code>.ROBLOSECURITY</code> is set! Is
						Roblox having an outage?
					</AlertDescription>
				</Alert>
			</div>
		);
	}

	return (
		<>
			<div className="flex items-center gap-6 bg-base rounded-xl px-8 py-6 w-fit mt-8 ml-0">
				{!profile ? (
					<Skeleton className="w-28 h-28 rounded-full" />
				) : (
					<LazyLoadedImage
						imgId={`AvatarHeadShot_${profile.id}`}
						alt=""
						className="w-28 h-28 rounded-full shadow-crust"
					/>
				)}
				<div className="flex flex-col justify-center">
					<span className="text-3xl font-bold text-text flex items-center gap-2">
						{profile ? (
							<>Hello, {profile.displayName}</>
						) : (
							<>
								<Skeleton className="w-96 h-8 rounded-lg" />
							</>
						)}
						{/* TODO: Fetch the User's Roblox Premium subscription state */}
						<RobloxPremiumSmall className="w-6 h-6 fill-transparent" />
						<RobloxVerifiedSmall className="w-6 h-6 fill-blue text-base" />
					</span>
					<span className="text-base font-mono text-subtext0 mt-1">
						{profile ? (
							<>@{profile.name}</>
						) : (
							<Skeleton className="w-64 h-6 rounded-lg" />
						)}
					</span>
				</div>
			</div>
		</>
	);
}