import 'package:flutter/material.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.15; // 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: 35,
            width: MediaQuery.of(context).size.width * widthFactor,
            child: TextFormField(
              controller: controller,
              keyboardType: keyboardType,
              cursorColor: Colors.blueAccent,
              style: TextStyle(fontSize: 12.0),
              decoration: InputDecoration(
                hintStyle: TextStyle(color: Colors.grey),
                floatingLabelStyle: TextStyle(color: Colors.blueAccent,),
                floatingLabelBehavior: FloatingLabelBehavior.always,
                labelText: labelText,
                contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), // Reduces inner padding
                errorStyle: TextStyle(fontSize: 10, height: 0.8, color: Colors.red),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(color: Colors.grey, width: 1), // Grey border
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(color: Colors.grey, width: 1), // Grey border when not focused
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(color: Colors.blueAccent, width: 2), // Blue border when focused
                ),
                errorBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(color: Colors.grey, width: 1), // Same as normal
                ),
                focusedErrorBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: BorderSide(color: Colors.blueAccent, width: 2), // Same as focused
                ),
              ),
              validator: validator,

            ),
          ),

        );

        },
    );
  }
}