import { View, Text, StyleSheet } from "react-native";
import { MultipleDigitsCode } from "./multiple_digits_code";
import { Control, UseFormSetValue } from "react-hook-form";
import { ResetPasswordFormValues } from "../hooks/useResetPassword";

interface CodeFormProps {
  setValue: UseFormSetValue<any>;
  getNewResetCode?: () => void;
}

export const CodeForm = ({ setValue, getNewResetCode }: CodeFormProps) => {
  const onTextChange = (value: string) => {
    setValue("code", value);
  };

  return (
    <View style={styles.container}>
      <Text>Introduce el código de verificación</Text>
      <MultipleDigitsCode length={6} onTextChange={onTextChange} />
      {getNewResetCode && (
        <Text onPress={getNewResetCode}>Obtener nuevo código</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
    gap: 20,
  },
});
