edr-platform/apps/edr-freight-web/portal/src/components/auth/AuthLayout.tsx

import type { ReactNode } from "react";
import { ShieldCheck, Train } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AuthLayoutProps {
  children: ReactNode;
  parentClassName?: string;
  contentClassName?: string;
  left: {
    badge: string;
    title: string;
    description: string;
    features: string[];
    stats: {
      label: string;
      value: string;
      footer: string;
      progress: string;
    };
  };
}

export default function AuthLayout({
  children,
  parentClassName,
  contentClassName,
  left,
}: AuthLayoutProps) {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <div className={cn("grid min-h-screen lg:grid-cols-2", parentClassName)}>
        <div className="relative hidden overflow-hidden bg-primary p-8 px-12 text-primary-foreground lg:flex lg:flex-col lg:justify-between">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.14),transparent_35%)]" />
          <div className="relative z-10">
            <div className="flex items-center gap-3">
              <div className="flex size-14 items-center justify-center rounded-3xl bg-white/10 backdrop-blur">
                <Train className="size-7" />
              </div>
              <div>
                <h1 className="text-xl font-bold">EDR Freight</h1>
                <p className="mt-1 text-sm opacity-80">
                  Railway Logistics Platform
                </p>
              </div>
            </div>
            <div className="mt-16 max-w-lg">
              <div className="inline-flex rounded-full bg-white/10 px-4 py-2 text-sm font-semibold backdrop-blur">
                {left.badge}
              </div>
              <h2 className="mt-6 text-4xl font-bold leading-tight tracking-tight">
                {left.title}
              </h2>
              <p className="mt-6 text-lg leading-8 opacity-85">
                {left.description}
              </p>
            </div>
            <div className="mt-14 grid gap-5">
              {left.features.map((item) => (
                <div key={item} className="flex items-center gap-3">
                  <div className="flex size-10 items-center justify-center rounded-2xl bg-white/10">
                    <ShieldCheck className="size-5" />
                  </div>
                  <span className="font-medium">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div
          className={cn(
            "flex items-center justify-center p-6 md:p-10",
            contentClassName,
          )}
        >
          <div className="w-full max-w-lg">
            <div className="mb-8 flex items-center gap-3 lg:hidden">
              <div className="flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
                <Train className="size-6" />
              </div>
              <div>
                <h1 className="text-2xl font-bold">EDR Freight</h1>
                <p className="text-sm text-muted-foreground">
                  Railway Logistics Platform
                </p>
              </div>
            </div>
            <div>{children}</div>
          </div>
        </div>
      </div>
    </div>
  );
}