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 width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: 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: [
        Container(
          width: double.infinity,
          padding: const EdgeInsets.symmetric(vertical: 28),
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
            ),
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(28),
              bottomRight: Radius.circular(28),
            ),
          ),
          child: Column(
            children: [
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Image.network(
                  'https://prosapp.co/img/logo_prosapp.png',
                  height: 36,
                  fit: BoxFit.contain,
                  errorBuilder: (_, __, ___) => const Text(
                    'ProsApp',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Color(0xFF42A4EF)),
                  ),
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                'Conecta con los mejores profesionales',
                style: TextStyle(color: Colors.white70, fontSize: 12),
              ),
            ],
          ),
        ),
        Expanded(child: SingleChildScrollView(child: child)),
      ],
    );
  }
}

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

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