/**
 * PlaceholderPage
 *
 * A small, reusable component to render consistent placeholder pages.
 *
 * Goals:
 * - Avoid duplicating layout code across many route pages.
 * - Make it easy to replace placeholders with real UI later.
 */
export default function PlaceholderPage({
	title,
	description,
	params,
	children,
}) {
	return (
		<div className="space-y-4">
			<div className="space-y-1">
				<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
				{description ? (
					<p className="text-sm text-muted-foreground">{description}</p>
				) : null}
			</div>

			<div className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
				<div className="space-y-3">
					<p className="text-sm font-medium">Route params</p>

					{params ? (
						<pre className="overflow-auto rounded-md bg-muted p-3 text-xs">
							{JSON.stringify(params, null, 2)}
						</pre>
					) : (
						<p className="text-xs text-muted-foreground">
							No params for this route.
						</p>
					)}

					{children ? <div className="pt-2">{children}</div> : null}
				</div>
			</div>
		</div>
	);
}