"use client";

/**
 * Onboarding Footer
 *
 * COPIED VERBATIM FROM: components/onboarding/steps/single-select-step.tsx:111-126
 * Common footer pattern with back and submit buttons
 */

import { cx } from "../lib/utils";
import { OnboardingButton } from "../primitives/onboarding-button";
import type { OnboardingFooterProps } from "../types/layout";

/**
 * Onboarding footer with submit and optional back button
 * COPIED VERBATIM FROM: components/onboarding/steps/single-select-step.tsx:111-126
 */
export function OnboardingFooter({
	submitText = "Continue",
	loadingText = "Submitting...",
	isLoading = false,
	isDisabled = false,
	onSubmit,
	backText,
	onBack,
	showBack = false,
}: OnboardingFooterProps) {
	const hasBack = showBack && onBack;

	return (
		<div
			className={cx("mt-6 flex", hasBack ? "justify-between" : "justify-end")}
		>
			{hasBack && (
				<OnboardingButton type="button" variant="ghost" onClick={onBack}>
					{backText || "Back"}
				</OnboardingButton>
			)}
			<OnboardingButton
				className="disabled:bg-muted disabled:text-muted-foreground"
				type={onSubmit ? "button" : "submit"}
				disabled={isDisabled || isLoading}
				aria-disabled={isDisabled || isLoading}
				isLoading={isLoading}
				onClick={onSubmit}
			>
				{isLoading ? loadingText : submitText}
			</OnboardingButton>
		</div>
	);
}