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

class CustomTextField extends StatelessWidget {
  final TextEditingController controller;
  final String labelText;
  final TextInputType? keyboardType;
  final String? Function(String?)? validator;

  const CustomTextField({
    Key? key,
    required this.controller,
    required this.labelText,
    this.keyboardType,
    required this.validator,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      builder: (context, sizingInfo) {
        double widthFactor;

        if (sizingInfo.deviceScreenType == DeviceScreenType.desktop) {
          widthFactor = 0.9; // Reduce width for desktop
        } else if (sizingInfo.deviceScreenType == DeviceScreenType.tablet) {
          widthFactor = 0.8; // Slightly reduced width for tablets
        } else {
          widthFactor = 1.0; // Full width for mobile
        }

        return Center(
          child: Container(
            height: 40,
            width: MediaQuery.of(context).size.width * widthFactor,
            child: TextFormField(
              controller: controller,
              keyboardType: keyboardType,
              cursorColor: Colors.blueAccent,
              style: GoogleFonts.poppins(fontSize: 11.5),
              decoration: InputDecoration(
                hintStyle: GoogleFonts.poppins(color: Colors.grey),
                floatingLabelStyle: GoogleFonts.poppins(
                  // color: Colors.black,
                  color: Color(0xFF575A74),
                ),
                floatingLabelBehavior: FloatingLabelBehavior.always,
                labelText: labelText,
                contentPadding: EdgeInsets.symmetric(
                    vertical: 8, horizontal: 12), // Reduces inner padding
                errorStyle: GoogleFonts.poppins(
                    fontSize: 10, height: 0.8, color: Colors.red),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(
                      color: Colors.grey.shade200, width: 1), // Grey border
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(
                      color: Colors.grey.shade200,
                      width: 1), // Grey border when not focused
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(
                      color: Colors.grey.shade200,
                      width: 1), // Blue border when focused
                ),
                errorBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(
                      color: Colors.grey.shade200, width: 1), // Same as normal
                ),
                focusedErrorBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(
                      color: Colors.grey.shade200, width: 1), // Same as focused
                ),
              ),
              validator: validator,
            ),
          ),
        );
      },
    );
  }
}