import React from 'react';
import type { TenantLoginLayoutProps } from './types';

/**
 * Layout Design 2 — Centered Card
 * Soft gradient full-page background (or banner image); identity above a centered white card.
 */
export default function LayoutDesign2({
    bannerUrl,
    iconUrl,
    logoUrl,
    primaryColor,
    appName,
    appDescription,
    loginTitle,
    loginSubtitle,
    alertNode,
    formNode,
}: TenantLoginLayoutProps) {
    return (
        <div
            className="relative flex min-h-screen flex-col items-center justify-center px-4 py-12"
            style={!bannerUrl ? { background: 'linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)' } : undefined}
        >
            {/* Banner fills full page */}
            {bannerUrl && (
                <>
                    <img src={bannerUrl} alt="" className="absolute inset-0 h-full w-full object-cover" />
                    <div className="absolute inset-0 bg-black/40" />
                </>
            )}

            {/* Card */}
            <div className="relative z-10 w-full max-w-[400px] rounded-2xl bg-white p-8 shadow-xl ring-1 ring-slate-200/60">
                <div className="space-y-5">
                    {/* Identity inside the card */}
                    <div className="flex flex-col items-center space-y-3 text-center">
                        {logoUrl ? (
                            <img src={logoUrl} alt="logo" className="h-10 max-w-[160px] object-contain" />
                        ) : iconUrl ? (
                            <img src={iconUrl} alt="icon" className="h-10 w-10 rounded-xl object-contain" />
                        ) : (
                            <div
                                className="h-10 w-10 rounded-xl"
                                style={{ backgroundColor: primaryColor }}
                            />
                        )}
                        <div>
                            <h1 className="mt-0.5 text-xl font-bold text-gray-900">{appName}</h1>
                            {appDescription && (
                                <p className="mt-1 text-sm leading-relaxed text-gray-500">{appDescription}</p>
                            )}
                        </div>
                    </div>

                    <hr className="border-gray-100" />

                    {/* Page heading */}
                    {loginTitle && (
                        <div className="space-y-1">
                            <h2 className="text-lg font-semibold text-gray-900">{loginTitle}</h2>
                            {loginSubtitle && (
                                <p className="mt-1 text-sm text-gray-500">{loginSubtitle}</p>
                            )}
                        </div>
                    )}

                    {alertNode}
                    {formNode}
                </div>
            </div>
        </div>
    );
}