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

// ─── Types ────────────────────────────────────────────────────────────────────

export type LoanEntryShellProps = {
  /**
   * Hero image URL shown on the left panel (desktop only).
   * Falls back to a muted placeholder panel when omitted.
   */
  heroSrc?: string;
  /** Alt text for the hero image. Pass "" when decorative. */
  heroAlt?: string;
  /** Logo node — typically <AuthLogo /> */
  logo?: React.ReactNode;
  /** Screen heading */
  title: string;
  /** Optional subtitle beneath the heading */
  subtitle?: string;
  className?: string;
  children: React.ReactNode;
};

// ─── Component ────────────────────────────────────────────────────────────────

/**
 * Two-column entry screen shell for the loan application flow.
 *
 * - Desktop (md+): left 50% = hero image, right 50% = logo + content
 * - Mobile (<md): single column, hero hidden, content full-width
 *
 * Figma: WealthX-Backoffice---Mobile-App
 *   Entry screen      → node 19308:56690
 *   App-type screen   → node 19308:56893
 */
export function LoanEntryShell({
  heroSrc,
  heroAlt = "",
  logo,
  title,
  subtitle,
  className,
  children,
}: LoanEntryShellProps) {
  return (
    <div className={cn("flex min-h-screen w-full font-sans", className)}>
      {/* ── Left: hero panel (desktop only) ──────────────────────────────── */}
      <div className="hidden shrink-0 md:block md:w-1/2">
        {heroSrc ? (
          // alt="" is sufficient for decorative images — no aria-hidden needed
          <img
            src={heroSrc}
            alt={heroAlt}
            className="h-full w-full object-cover"
          />
        ) : (
          <div className="h-full w-full bg-muted" aria-hidden="true" />
        )}
      </div>

      {/* ── Right: content panel ─────────────────────────────────────────── */}
      <div className="flex w-full flex-col md:w-1/2">
        {/* Logo — pinned to top-left */}
        {logo && <div className="px-4 pt-6 sm:px-10 sm:pt-10">{logo}</div>}

        {/* Top-aligned content */}
        <div className="flex flex-1 flex-col items-center justify-start gap-6 px-4 py-6 sm:gap-10 sm:px-10 sm:py-10">
          {/* Heading block */}
          <div className="flex flex-col items-center gap-3 text-center">
            <h1 className="m-0 text-h2 text-foreground">{title}</h1>
            {subtitle && (
              <p className="m-0 max-w-sm text-body-small text-muted-foreground">
                {subtitle}
              </p>
            )}
          </div>

          {/* Option cards / content */}
          {children}
        </div>
      </div>
    </div>
  );
}