import { GameDetail } from "@/features/games/components/game-detail"
import { createFileRoute, useRouter } from "@tanstack/react-router"
import { ArrowLeft } from "lucide-react"

export const Route = createFileRoute("/games/$gameId")({
	component: GameDetailPage,
})

function GameDetailPage() {
	const { gameId } = Route.useParams()
	const router = useRouter()

	return (
		<div className="mx-auto max-w-lg p-4">
			<button
				type="button"
				onClick={() => router.history.back()}
				className="mb-4 flex items-center gap-1 text-sm text-muted-foreground"
			>
				<ArrowLeft className="h-4 w-4" />
				Back
			</button>
			<GameDetail gameId={gameId} />
		</div>
	)
}