"use client";

import { useEffect } from "react";
import Link from "next/link";
import { usePlaceDetails } from "@/hooks/roblox/usePlaceDetails";
import { RobloxVerifiedSmall } from "@/components/roblox/RobloxTooltips";
import { Button } from "@/components/ui/button";
import { useGameLaunch } from "@/components/providers/GameLaunchProvider";

interface GamePageContentProps {
	placeId: string;
}

export default function GamePageContent({ placeId }: GamePageContentProps) {
	const game = usePlaceDetails(placeId);
	const { launchGame } = useGameLaunch();

	// Set dynamic document title
	useEffect(() => {
		if (!!game) {
			document.title = `${game.name} | Roblox`;
		}
	}, [game]);

	if (!game) return <div className="p-4">Loading game...</div>;

	return (
		<div className="p-4 space-y-6">
			<Button onClick={() => launchGame(game.rootPlaceId.toString())}>
				PLAY
			</Button>
			<div className="break-all pl-4 whitespace-pre-line font-black text-2xl">
				{game.name}
			</div>
			<div className="break-all pl-4 whitespace-pre-line font-bold flex">
				<Link
					href={`https://roblox.com/${
						game.creator.type === "Group" ? "groups" : "user"
					}/${game.creator.id}`}
					className="flex"
				>
					<span className="underline">
						{game.creator.name}
					</span>
						{game.creator.hasVerifiedBadge && (
							<RobloxVerifiedSmall className="text-base fill-blue w-4 h-4" />
						)}
				</Link>
			</div>

			<div className="break-all pl-4 whitespace-pre-line">
				{game.description}
			</div>
		</div>
	);
}