import type { AuthPageLayoutProps } from './types.js';

/**
 * Full-page auth layout — centered card with product branding.
 * Wraps any auth form (LoginForm, RegisterForm, etc.).
 * Styled via CSS custom properties (inherits --bl-* from host app).
 */
export function AuthPageLayout({
  productName,
  logo,
  title,
  subtitle,
  children,
  footer,
  className,
}: AuthPageLayoutProps) {
  return (
    <div
      className={className}
      data-testid="bl-auth-page"
      style={{
        display: 'flex',
        minHeight: '100vh',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '16px',
        background: 'var(--bl-page-bg, #f5f5f5)',
        fontFamily: 'var(--bl-font, system-ui, -apple-system, sans-serif)',
      }}
    >
      <div
        style={{
          width: '100%',
          maxWidth: '400px',
          background: 'var(--bl-surface, #fff)',
          borderRadius: 'var(--bl-card-radius, 12px)',
          boxShadow: 'var(--bl-card-shadow, 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06))',
          padding: '32px',
        }}
      >
        {/* Branding */}
        <div style={{ textAlign: 'center', marginBottom: '24px' }}>
          {logo && (
            <div style={{ marginBottom: '12px' }} data-testid="bl-auth-logo">
              {typeof logo === 'string' ? (
                <img src={logo} alt={productName} style={{ height: '48px' }} />
              ) : (
                logo
              )}
            </div>
          )}
          <div
            style={{ fontSize: '20px', fontWeight: 700, color: 'var(--bl-text, #111)' }}
            data-testid="bl-auth-product-name"
          >
            {productName}
          </div>
          <div
            style={{
              fontSize: '16px',
              fontWeight: 600,
              color: 'var(--bl-text, #333)',
              marginTop: '8px',
            }}
            data-testid="bl-auth-title"
          >
            {title}
          </div>
          {subtitle && (
            <div
              style={{ fontSize: '14px', color: 'var(--bl-muted, #666)', marginTop: '4px' }}
              data-testid="bl-auth-subtitle"
            >
              {subtitle}
            </div>
          )}
        </div>

        {/* Form content */}
        {children}

        {/* Footer */}
        {footer && (
          <div
            style={{
              marginTop: '20px',
              paddingTop: '16px',
              borderTop: '1px solid var(--bl-border, #eee)',
              textAlign: 'center',
              fontSize: '13px',
              color: 'var(--bl-muted, #999)',
            }}
            data-testid="bl-auth-footer"
          >
            {footer}
          </div>
        )}
      </div>
    </div>
  );
}