import BackButton from "@/components/BackButton";
import Button from "@/components/ui/Button";
import Text from "@/components/ui/Text";
import { AntDesign } from "@expo/vector-icons";
import React from "react";
import { GestureResponderEvent, Modal, ModalProps, View } from "react-native";
import Screen from "../ui/Screen";

interface Props extends ModalProps {
  email: string;
  onPress: (event: GestureResponderEvent) => void;
}

export default React.forwardRef<any, Props>(
  ({ email, onPress, ...props }, ref): React.ReactElement => {
    return (
      <Modal {...ref} animationType="fade" {...props}>
        <Screen>
          <BackButton onPress={onPress} />
          <View className="gap-4">
            <AntDesign
              className="bg-green-100 p-4 rounded-3xl h-16 w-16 self-center"
              name="check"
              size={30}
              color={"green"}
            />
            <Text position="center" size="3xl">
              Code envoyé !
            </Text>
            <View className="gap-2">
              <Text position="center" size="xl">
                Nous t'avons envoyé le code de vérification à
              </Text>
              <Text position="center" size="2xl" weight="bold">
                {email ?? "test@Optifit.com"}
              </Text>
              <Text position="center" size="xl">
                Clique sur renvoyer si tu n'as pas reçu d’ici quelques secondes
                ! 🔥
              </Text>
            </View>
            <Button style="secondary">Renvoyer le code</Button>
          </View>
        </Screen>
      </Modal>
    );
  }
);