import { ReactNode } from 'react';

interface SplitLayoutProps {
    banner: string | null;
    children: ReactNode;
}

/**
 * Split layout: banner image on the left, login form on the right.
 * This is the default layout (matches the existing Login.tsx design).
 */
export default function SplitLayout({ banner, children }: SplitLayoutProps) {
    return (
        <div className="grid min-h-screen grid-cols-1 overflow-hidden md:grid-cols-2">
            {/* Left — Banner */}
            <div className="hidden border md:block">
                <img
                    src={banner || '/assets/brand.jpg'}
                    alt="Brand"
                    className="h-screen w-full object-cover"
                />
            </div>

            {/* Right — Form */}
            <div className="flex flex-1 items-center justify-center overflow-hidden bg-background p-4 sm:p-8">
                <div className="flex max-h-screen w-full max-w-md flex-col justify-center sm:max-w-sm">
                    {children}
                </div>
            </div>
        </div>
    );
}