import 'package:flutter/material.dart';

import 'package:pin_code_fields/pin_code_fields.dart';


class TwoFactorCodeInput extends StatelessWidget {
  final void Function(String) onCompleted;

  const TwoFactorCodeInput({super.key, required this.onCompleted});

  @override
  Widget build(BuildContext context){
    final theme = Theme.of(context).colorScheme;
    
    return Center(
    child: ConstrainedBox(
      constraints: const BoxConstraints(maxWidth: 300),
      child: MaterialPinField(
        length: 6,
        autoFocus: true,
        keyboardType: TextInputType.number,
        theme: MaterialPinTheme(
          entryAnimation: MaterialPinAnimation.fade,
          shape: MaterialPinShape.outlined,
          borderRadius: BorderRadius.circular(4),
          cellSize: Size(40, 48),
          borderColor: theme.primaryContainer.withValues(alpha: 0.2),
          focusedBorderColor: theme.primary,
          filledBorderColor: theme.primary,
          cursorColor: theme.primary,
          focusedFillColor: theme.onSecondary,
          filledFillColor: theme.onSecondary,
          fillColor: theme.onSecondary,
        ),
        onCompleted: onCompleted,
        onChanged: (_) {},
      ),
    ),
  );
  }
}