import React from "react";
import { cn } from "@/lib/utils";

/**
 * Outer responsive shell for multi-step application flows (e.g. Loan Application).
 *
 * - Mobile (< md): full-screen, no extra padding — content fills the viewport.
 * - Desktop (≥ md): wraps content in a centered max-width card so the flow
 *   doesn't stretch across a wide screen.
 *
 * Compose inside this wrapper, then place OnboardingLayout (or similar) as the child.
 */
export interface ApplicationMobileLayoutProps {
  children: React.ReactNode;
  className?: string;
}

export function ApplicationMobileLayout({
  children,
  className,
}: ApplicationMobileLayoutProps) {
  return (
    <div
      className={cn(
        "min-h-screen bg-background font-sans",
        // On desktop, center and cap the width so it doesn't span the full screen
        "md:flex md:items-start md:justify-center md:py-8",
        className,
      )}
    >
      <div className="w-full md:max-w-2xl">{children}</div>
    </div>
  );
}