import type { ReactNode } from 'react';
import { Link } from 'react-router-dom';

interface AuthLayoutProps {
  children: ReactNode;
  title: string;
  subtitle?: string;
}

export function AuthLayout({ children, title, subtitle }: AuthLayoutProps) {
  return (
    <div className="flex min-h-screen">
      {/* Left side - Form */}
      <div className="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
        <div className="mx-auto w-full max-w-sm lg:w-96">
          {/* Logo */}
          <div className="mb-8">
            <Link to="/" className="flex items-center">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-600">
                <span className="text-xl font-bold text-white">E</span>
              </div>
              <span className="ml-3 text-xl font-bold text-gray-900">ERP Generic</span>
            </Link>
          </div>

          {/* Header */}
          <div className="mb-8">
            <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
            {subtitle && (
              <p className="mt-2 text-sm text-gray-600">{subtitle}</p>
            )}
          </div>

          {/* Content */}
          {children}
        </div>
      </div>

      {/* Right side - Image/Branding */}
      <div className="relative hidden w-0 flex-1 lg:block">
        <div className="absolute inset-0 bg-gradient-to-br from-primary-600 to-primary-800">
          <div className="flex h-full flex-col items-center justify-center px-12 text-white">
            <div className="max-w-md text-center">
              <h1 className="text-4xl font-bold">
                Sistema de Gestión Empresarial
              </h1>
              <p className="mt-4 text-lg text-primary-100">
                Administra tu empresa de forma eficiente con nuestra plataforma
                integral de gestión.
              </p>
              <div className="mt-8 grid grid-cols-2 gap-4 text-sm">
                <div className="rounded-lg bg-white/10 p-4">
                  <div className="text-2xl font-bold">309</div>
                  <div className="text-primary-200">Endpoints API</div>
                </div>
                <div className="rounded-lg bg-white/10 p-4">
                  <div className="text-2xl font-bold">15</div>
                  <div className="text-primary-200">Módulos</div>
                </div>
                <div className="rounded-lg bg-white/10 p-4">
                  <div className="text-2xl font-bold">100%</div>
                  <div className="text-primary-200">Multi-tenant</div>
                </div>
                <div className="rounded-lg bg-white/10 p-4">
                  <div className="text-2xl font-bold">24/7</div>
                  <div className="text-primary-200">Disponible</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
