import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sigap/src/utils/constants/colors.dart';
import 'package:sigap/src/utils/constants/sizes.dart';
import 'package:sigap/src/utils/device/device_utility.dart';

class OtpInputField extends StatelessWidget {
  final TextEditingController controller;
  final FocusNode focusNode;
  final Function(String) onChanged;
  final bool autoFocus;

  const OtpInputField({
    super.key,
    required this.controller,
    required this.focusNode,
    required this.onChanged,
    this.autoFocus = false,
  });

  @override
  Widget build(BuildContext context) {
    // Use responsive sizing based on screen width
    final width = TDeviceUtils.getScreenWidth(context) * 0.12;
    final height = width; // Square aspect ratio

    return SizedBox(
      width: width,
      height: height,
      child: TextFormField(
        controller: controller,
        focusNode: focusNode,
        autofocus: autoFocus,
        onChanged: onChanged,
        keyboardType: TextInputType.number,
        textAlign: TextAlign.center,
        inputFormatters: [
          LengthLimitingTextInputFormatter(1),
          FilteringTextInputFormatter.digitsOnly,
        ],
        style: Theme.of(context).textTheme.headlineSmall?.copyWith(
          fontWeight: FontWeight.bold,
          color: TColors.textPrimary,
        ),
        decoration: InputDecoration(
          contentPadding: EdgeInsets.zero,
          filled: true,
          fillColor: TColors.lightContainer,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(TSizes.borderRadiusMd),
            borderSide: BorderSide(color: TColors.borderPrimary, width: 1),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(TSizes.borderRadiusMd),
            borderSide: BorderSide(color: TColors.borderPrimary, width: 1),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(TSizes.borderRadiusMd),
            borderSide: BorderSide(color: TColors.primary, width: 2),
          ),
        ),
      ),
    );
  }
}
