import { createFileRoute, Link } from "@tanstack/react-router";
import { getDoc } from "../../lib/docs";

export const Route = createFileRoute("/docs/$")({
	component: RouteComponent,
});

function RouteComponent() {
	const { _splat } = Route.useParams();
	const slug = _splat || "";

	const Doc = getDoc(slug);

	if (!Doc) {
		return (
			<div>
				<p>
					You Have reached a doc page that dose not seem to exist please
					validate and come back
				</p>
				<Link to="/docs">Docs Home</Link>
			</div>
		);
	}

	return (
		<div className="mx-auto w-full max-w-4xl px-6 py-8">
			<Doc />
		</div>
	);
}
