import 'package:flutter/material.dart';

class AuthForm extends StatefulWidget {
  const AuthForm({super.key, required this.onSubmit});

  final VoidCallback onSubmit;

  @override
  State<AuthForm> createState() => _AuthFormState();
}

class _AuthFormState extends State<AuthForm> {

  bool _obscure = true;
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 28),
        padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 26),
        decoration: BoxDecoration(
          color: const Color(0xA6F4FFFD), // Light mint white
          borderRadius: BorderRadius.circular(26),
          boxShadow: [
            BoxShadow(
              color: const Color(0x803EFECB), // green glow shadow
              blurRadius: 35,
              spreadRadius: -5,
            ),
          ],

          border: Border.all(
            color: const Color(0xFF3EFECB), // Dark border
            width: 2,
          ),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // main lable
            const Text(
              "تسجيل دخول",
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.w700,
                color: Color(0xFF00382A),
              ),
            ),

            const SizedBox(height: 24),
            //lable
            const Text(
              "اسم المستخدم",
              style: TextStyle(fontSize: 16, color: Colors.black87
              ),
            ),
    
            const SizedBox(height: 6),

            //username field
            Container(
              decoration: BoxDecoration(
                color: const Color(0xDEDEDEDE),
                borderRadius: BorderRadius.circular(7),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    blurRadius: 4,
                    offset: Offset(0, 2),
                  ),
                ],
              ),
              child: const TextField(
                decoration: InputDecoration(
                  hintText: "اسم المستخدم",
                  border: InputBorder.none,
                  contentPadding: EdgeInsets.symmetric(
                    horizontal: 16,
                    vertical: 12,
                  ),
                ),
              ),
            ),

            const SizedBox(height: 22),

            /// PASSWORD LABEL
            const Text(
              "كلمة المرور",
              style: TextStyle(
                fontSize: 15,
                color: Colors.black87,
              ),
            ),
            
            
            /// PASSWORD FIELD
            Container(
              decoration: BoxDecoration(
                color: const Color(0xFFE3E3E3),
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    blurRadius: 4,
                    offset: Offset(0, 2),
                  ),
                ],
              ),
              child: TextField(
                obscureText: _obscure,
                decoration: InputDecoration(
                  hintText: "كلمة المرور",
                  border: InputBorder.none,
                  contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),

                  suffixIcon: IconButton(
                    icon: Icon(
                      _obscure ? Icons.visibility : Icons.visibility_off,
                      color: Colors.black54,
                    ),
                    onPressed: () {
                      setState(() => _obscure = !_obscure);
                    },
                  ),
                ),
              ),
            ),

            const SizedBox(height: 26),

          ],
        ),
      ),
    );
  }
}