import React from 'react';
import { ShieldCheck } from 'lucide-react';
import type { LoginLayoutProps } from '../types';

/**
 * Layout Design 2 — Centered Card
 * Soft gradient full-page background; identity above a centered white card.
 */
export default function LayoutDesign2({
    bannerUrl,
    iconUrl,
    logoUrl,
    primaryColor,
    appName,
    appDescription,
    loginTitle,
    loginSubtitle,
    alertNode,
    formNode,
}: LoginLayoutProps) {
    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" />
            )}

            {/* 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="flex h-10 w-10 items-center justify-center rounded-xl"
                                style={{ backgroundColor: primaryColor }}
                            >
                                <ShieldCheck className="h-5 w-5 text-white" />
                            </div>
                        )}
                        <div>
                            <p className="text-xs font-semibold uppercase tracking-[0.15em] text-gray-400">
                                Admin Panel
                            </p>
                            <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 */}
                    <div className="space-y-1">
                        <h2 className="text-lg font-semibold text-gray-900">{loginTitle}</h2>
                        <p className="text-sm text-gray-500">{loginSubtitle}</p>
                    </div>

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

            <p className={`relative z-10 mt-5 text-center text-xs ${bannerUrl ? 'text-white/40' : 'text-slate-400'}`}>
                Protected area — all sign-in attempts are logged.
            </p>
        </div>
    );
}