import * as React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { LogoMinimised } from '@archer/ui/components';

export interface AuthLayoutProps {
  children: React.ReactNode;
  subtitle?: string;
  className?: string;
}

/**
 * AuthLayout Component
 *
 * Provides consistent layout for all authentication pages:
 * - Dark gradient background (slate-900 via primary-900)
 * - Centered card wrapper with shadow and border
 * - TWWIM branding header
 * - Responsive padding and animations
 * - Optional subtitle for page-specific context
 *
 * Usage:
 * ```tsx
 * <AuthLayout subtitle="Sign in to Archer Dashboard">
 *   <form>...</form>
 * </AuthLayout>
 * ```
 */
export function AuthLayout({ children, subtitle, className }: AuthLayoutProps) {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-primary-900 to-slate-900 p-4">
      <Card className={cn(
        'w-full max-w-md shadow-2xl border-border/50 animate-fadeInUp',
        className
      )}>
        <CardContent className="px-4 py-8 sm:px-8 sm:py-10">
          {/* Header with TWWIM Branding */}
          <div className="mb-8 flex flex-col items-center">
            <LogoMinimised variant="green" className="h-12 w-auto mb-2" />
            {subtitle && (
              <p className="text-muted-foreground">{subtitle}</p>
            )}
          </div>

          {/* Page-specific content */}
          {children}
        </CardContent>
      </Card>
    </div>
  );
}