import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class NotFoundPage extends StatelessWidget {
  const NotFoundPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints){
          final parentWidth = constraints.maxWidth;
          double containerWidth = parentWidth > 1440
              ? parentWidth*0.5 : parentWidth > 1280 && parentWidth <= 1440
              ? parentWidth*0.6 : parentWidth > 1080 && parentWidth <= 1280
              ? parentWidth*0.75 : parentWidth > 900 && parentWidth <= 1080
              ? parentWidth*0.8 : parentWidth > 720 && parentWidth <= 900
              ? parentWidth*0.85 : parentWidth > 540 && parentWidth <= 720
              ? parentWidth*0.9 : parentWidth;
          double containerMargin = (parentWidth - containerWidth) / 2;

          return SingleChildScrollView(
            child: Container(
              width: containerWidth,
              margin: EdgeInsets.symmetric(
                horizontal: containerMargin,
              ),
              child: Column(
                children: [
                  const SizedBox(height: 32.0),
                  Row(
                    children: [
                      const SizedBox(width: 32.0),
                      Image.asset(
                        "logo.png",
                        width: 64.0,
                      ),
                      Expanded(child: Container()),
                      Image.asset(
                        "logo_completo.png",
                        height: 64.0,
                      )
                    ],
                  ),
                  const SizedBox(
                    height: 32.0,
                  ),
                  Container(
                    width: double.infinity,
                    child: Text(
                      "¡Whoops!",
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: const Color(0xFF666666),
                        fontSize: 32.0
                      ),
                    ),
                    padding: const EdgeInsets.symmetric(horizontal: 32),
                  ),
                  const SizedBox(
                    height: 16.0,
                  ),
                  const Icon(
                    Icons.sentiment_dissatisfied_outlined,
                    color: Color.fromRGBO(230, 59, 59, 1),
                    size: 128.0,
                  ),
                  const SizedBox(
                    height: 16.0,
                  ),
                  Container(
                    width: double.infinity,
                    child: Text(
                      "Error\n404",
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: const Color.fromRGBO(230, 59, 59, 1),
                        fontSize: 64.0,
                      ),
                    ),
                    padding: const EdgeInsets.symmetric(horizontal: 32),
                  ),
                  const SizedBox(
                    height: 16.0,
                  ),
                  Container(
                    width: double.infinity,
                    child: Text(
                      "La página que intentas solicitar no se ha encontrado",
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        fontSize: 18.0,
                      ),
                    ),
                    padding: const EdgeInsets.symmetric(horizontal: 32),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}
