import BackButton from "@/components/BackButton";
import { AntDesignIconNames } from "@/components/Icons";
import Button from "@/components/ui/Button";
import Screen from "@/components/ui/Screen";
import Text from "@/components/ui/Text";
import { Link } from "expo-router";
import { View } from "react-native";

export default function ResetPasswordPage() {
  interface IResetButton {
    icon: AntDesignIconNames;
    text: string;
  }

  const resetButtons: IResetButton[] = [
    { icon: "mail", text: "Envoyer par email" },
    { icon: "lock", text: "Envoyer par 2FA" },
    { icon: "message1", text: "Envoyer par SMS" },
  ];

  return (
    <Screen>
      <BackButton />
      <View className="gap-4">
        <View className="gap-2">
          <Text className="text-center" size="3xl" weight="bold">
            Réinitialisation de ton mot de passe
          </Text>
          <Text size="lg" className="text-center">
            Selectionne une méthode pour recevoir ton code temporaire !
          </Text>
        </View>
        <View className="gap-4">
          {resetButtons.map((resetButton) => (
            <Button
              key={resetButton.text}
              size="2xl"
              style="secondary"
              beforeIcon={resetButton.icon}
              afterIcon="arrowright"
            >
              <Link href="/reset-password-with-email">{resetButton.text}</Link>
            </Button>
          ))}
        </View>
      </View>
    </Screen>
  );
}