import { View, Text, StyleSheet } from "react-native";
import { CustomTextInput } from "../../common/components/form/text_input";
import { Control, Controller } from "react-hook-form";
import { ResetPasswordFormValues } from "../pages/reset_password_page";

interface ResetPasswordFormProps {
  control: Control<ResetPasswordFormValues, any>;
}

export const ResetPasswordForm = ({ control }: ResetPasswordFormProps) => {
  return (
    <View style={styles.container}>
      <Text>Para reestablecer tu contraseña te enviaremos un email</Text>
      <Controller
        control={control}
        name="email"
        render={({ field: { onChange, onBlur, value }, formState: {errors} }) => (
          <CustomTextInput
            textInputProps={{
              placeholder: "Email",
              autoComplete: "email",
              autoCapitalize: "none",
              onChangeText: onChange
            }}
            label="Email"
            value={value}
            onBlur={onBlur}
            errors={errors.email?.message}
          />
        )}
      />
    </View>
  );
};

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