import 'package:easycook_mobile/pages/auth/register.dart';
import 'package:easycook_mobile/pages/auth/reset_password.dart';
import 'package:easycook_mobile/theme.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class OTPPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(top: 96, left: 16, right: 16, bottom: 63),
        child: ListView(
          children: [
            Column(
              children: [
                // Title
                Text(
                  'Verifikasi OTP',
                  style: GoogleFonts.montserrat().copyWith(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 32,
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 48,
            ),
            // Gambar
            Container(
              child: SizedBox(
                width: 207,
                height: 198,
                child: Image.asset('images/otp.png'),
              ),
            ),
            SizedBox(
              height: 56,
            ),
            // Text
            Container(
              child: Text(
                'Kode verifikasi telah dikirim ke nomor WhatsApp anda',
                style: GoogleFonts.montserrat().copyWith(color: Colors.black),
                textAlign: TextAlign.center,
              ),
            ),
            SizedBox(
              height: 30,
            ),
            // OTP
            Container(
              padding: EdgeInsets.only(
                left: 58,
                right: 58,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  SizedBox(
                    height: 50,
                    width: 50,
                    child: TextFormField(
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.orange),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.amberAccent),
                        ),
                      ),
                      style: TextStyle(color: Colors.black),
                      autofocus: false,
                    ),
                  ),
                  SizedBox(
                    height: 50,
                    width: 50,
                    child: TextFormField(
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.orange),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.amberAccent),
                        ),
                      ),
                      style: TextStyle(color: Colors.black),
                      autofocus: false,
                    ),
                  ),
                  SizedBox(
                    height: 50,
                    width: 50,
                    child: TextFormField(
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.orange),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.amberAccent),
                        ),
                      ),
                      style: TextStyle(color: Colors.black),
                      autofocus: false,
                    ),
                  ),
                  SizedBox(
                    height: 50,
                    width: 50,
                    child: TextFormField(
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.orange),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.amberAccent),
                        ),
                      ),
                      style: TextStyle(color: Colors.black),
                      autofocus: false,
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 32,
            ),
            // Belum terkirim ?
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Belum Terkirim?',
                  style: GoogleFonts.montserrat().copyWith(
                    color: Colors.black,
                  ),
                ),
                TextButton(
                  onPressed: () {},
                  child: Text(
                    'Kirim ulang',
                    style: GoogleFonts.montserrat(),
                  ),
                ),
              ],
            ),
            // Button
            SizedBox(
              height: 48,
              width: 328,
              child: TextButton(
                style: TextButton.styleFrom(
                  backgroundColor: Colors.orange,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => ResetPassword(),
                    ),
                  );
                },
                child: Text(
                  'Kirim',
                  style: GoogleFonts.montserrat().copyWith(
                      color: Colors.white, fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}