import 'package:flutter/material.dart';
import 'package:prosapp_web_app/ui/layouts/auth/widgets/background_auth.dart';

class AuthLayout extends StatelessWidget {
  final Widget child;
  const AuthLayout({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      body: size.width > 900
          ? _DesktopBody(child: child)
          : _MobileBody(child: child),
    );
  }
}

class _MobileBody extends StatelessWidget {
  final Widget child;
  const _MobileBody({required this.child});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Gradient header with logo
        Container(
          width: double.infinity,
          padding: const EdgeInsets.symmetric(vertical: 36),
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
            ),
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(32),
              bottomRight: Radius.circular(32),
            ),
          ),
          child: Column(
            children: [
              Image.network(
                'https://prosapp.co/img/logo_prosapp.png',
                height: 52,
                color: Colors.white,
                colorBlendMode: BlendMode.srcATop,
                errorBuilder: (_, __, ___) => const Text(
                  'ProsApp',
                  style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, color: Colors.white),
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                'Conecta con los mejores profesionales',
                style: TextStyle(color: Colors.white70, fontSize: 13),
              ),
            ],
          ),
        ),
        Expanded(child: SingleChildScrollView(child: child)),
      ],
    );
  }
}

class _DesktopBody extends StatelessWidget {
  final Widget child;
  const _DesktopBody({required this.child});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Row(
      children: [
        // Left gradient panel
        const SizedBox(width: 420, child: BackgroundAuth()),
        // Right form panel
        Expanded(
          child: Container(
            height: size.height,
            color: Colors.white,
            child: Center(child: child),
          ),
        ),
      ],
    );
  }
}