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

export default function LayoutDesign1({
    bannerUrl,
    iconUrl,
    logoUrl,
    primaryColor,
    appName,
    appDescription,
    loginTitle,
    loginSubtitle,
    alertNode,
    formNode,
}: LoginLayoutProps) {
    return (
        <div className="flex min-h-screen bg-white">

            {/* Left: Banner / Brand panel */}
            <div
                className="relative hidden flex-col lg:flex lg:w-1/2 overflow-hidden"
                style={{ backgroundColor: primaryColor }}
            >
                {bannerUrl && (
                    <img
                        src={bannerUrl}
                        alt=""
                        className="absolute inset-0 h-full w-full object-cover"
                    />
                )}
            </div>

            {/* Right: Login form */}
            <div className="flex flex-1 flex-col items-center justify-center bg-white px-6 py-12">
                <div className="w-full max-w-[360px] space-y-6">

                    {/* Branding */}
                    <div className="flex flex-col items-center space-y-3 text-center">
                        {logoUrl ? (
                            <img src={logoUrl} alt="logo" className="h-9 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}

                    <p className="text-center text-xs text-gray-400">
                        Protected area — all sign-in attempts are logged.
                    </p>
                </div>
            </div>

        </div>
    );
}