import { ReactNode } from 'react';

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

/**
 * Full-background layout: banner covers the entire screen, login card floats on top.
 */
export default function FullBackgroundLayout({ banner, children }: FullBackgroundLayoutProps) {
    return (
        <div className="relative flex min-h-screen items-center justify-center p-4">
            {/* Full-screen background */}
            <div className="absolute inset-0 z-0">
                {banner ? (
                    <img src={banner} alt="" className="h-full w-full object-cover" />
                ) : (
                    <div className="h-full w-full bg-gradient-to-br from-primary/80 to-secondary/80" />
                )}
                <div className="absolute inset-0 bg-black/40" />
            </div>

            {/* Form card */}
            <div className="relative z-10 w-full max-w-sm rounded-xl bg-background/95 p-8 shadow-2xl backdrop-blur-sm">
                {children}
            </div>
        </div>
    );
}