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

/**
 * Layout Design 3 — Card with Banner Header
 * Clean white page. The card contains the banner image (or a colored gradient)
 * as a tall header block with identity overlaid, then the form below inside the same card.
 */
export default function LayoutDesign3({
    bannerUrl,
    iconUrl,
    logoUrl,
    primaryColor,
    appName,
    appDescription,
    loginTitle,
    loginSubtitle,
    alertNode,
    formNode,
}: TenantLoginLayoutProps) {
    return (
        <div className="flex min-h-screen items-center justify-center bg-slate-100 px-4 py-12">
            <div className="w-full max-w-[420px] overflow-hidden rounded-2xl bg-white shadow-2xl">

                {/* Banner / identity header */}
                <div className="relative h-48">
                    {bannerUrl ? (
                        <img
                            src={bannerUrl}
                            alt=""
                            className="absolute inset-0 h-full w-full object-cover"
                        />
                    ) : (
                        <div
                            className="absolute inset-0"
                            style={{
                                background: `linear-gradient(135deg, ${primaryColor} 0%, ${primaryColor}cc 100%)`,
                            }}
                        />
                    )}

                    {/* Gradient scrim */}
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />

                    {/* Identity pinned to bottom of header */}
                    <div className="absolute bottom-0 left-0 right-0 flex items-end gap-3 px-6 pb-5">
                        {logoUrl ? (
                            <img
                                src={logoUrl}
                                alt="logo"
                                className="h-8 max-w-[120px] shrink-0 object-contain drop-shadow-md"
                            />
                        ) : iconUrl ? (
                            <img
                                src={iconUrl}
                                alt="icon"
                                className="h-10 w-10 shrink-0 rounded-xl object-contain shadow"
                            />
                        ) : (
                            <div
                                className="h-10 w-10 shrink-0 rounded-xl shadow ring-2 ring-white/30"
                                style={{ backgroundColor: primaryColor }}
                            />
                        )}
                        <div className="min-w-0">
                            <h1 className="truncate text-lg font-bold text-white">{appName}</h1>
                            {appDescription && (
                                <p className="truncate text-xs text-white/70">{appDescription}</p>
                            )}
                        </div>
                    </div>
                </div>

                {/* Form */}
                <div className="space-y-5 px-6 py-6">
                    {loginTitle && (
                        <div>
                            <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>
    );
}