"use client";

/**
 * Onboarding Layout
 *
 * COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:86-117
 * Main layout wrapper with header and content area
 */

import type { ReactNode } from "react";
import { useScroll } from "../lib/use-scroll";
import type { Step } from "../types/layout";
import { OnboardingHeader } from "./OnboardingHeader";
import { baseSteps } from "./OnboardingProgress";

interface OnboardingLayoutProps {
	children: ReactNode;
	/** Custom steps for progress display */
	steps?: Step[];
	/** Back button href */
	backHref?: string;
	/** Back button text */
	backText?: string;
}

/**
 * Main onboarding layout with header and scrollable content
 * COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:86-117
 */
export function OnboardingLayout({
	children,
	steps = baseSteps,
	backHref = "/",
	backText = "Home",
}: OnboardingLayoutProps) {
	const scrolled = useScroll(15);

	return (
		<>
			<OnboardingHeader
				collapsed={scrolled}
				steps={steps}
				backHref={backHref}
				backText={backText}
			/>
			<main id="main-content" className="mx-auto mb-20 mt-28 max-w-lg">
				{children}
			</main>
		</>
	);
}