import { Text } from "./components/ui/text";
import {
  Button,
  ButtonGroup,
  ButtonIcon,
  ButtonText,
} from "./components/ui/button";
import { VStack } from "./components/ui/vstack";
import React from "react";
import {
  ArrowRightIcon,
  LockIcon,
  MailIcon,
  MessageCircleIcon,
} from "./components/ui/icon";
import BackButton from "./components/BackButton";
import Screen from "./components/Screen";
import { Heading } from "./components/ui/heading";
import { Link } from "expo-router";

const resetButtons: IResetButton[] = [
  { icon: MailIcon, text: "Envoyer par email" },
  { icon: LockIcon, text: "Envoyer par 2FA" },
  { icon: MessageCircleIcon, text: "Envoyer par SMS" },
];

interface IResetButton {
  icon: React.ElementType;
  text: string;
}

export default function ResetPasswordPage() {
  return (
    <Screen>
      <BackButton link={"/LoginPage"} />
      <VStack space="2xl">
        <VStack space="sm">
          <Heading className="text-center" size="3xl">
            Réinitialisation de ton mot de passe
          </Heading>
          <Text size="lg" className="text-center">
            Selectionne une méthode pour recevoir ton code temporaire
          </Text>
        </VStack>
        <ButtonGroup space="xl">
          {resetButtons.map((resetButton) => (
            <Link href={"/CodeSentPage"} asChild>
              <Button
                className="justify-between"
                key={resetButton.text}
                size="2xl"
                action="primary"
                variant="outline"
              >
                <ButtonIcon as={resetButton.icon} />
                <ButtonText>{resetButton.text}</ButtonText>
                <ButtonIcon as={ArrowRightIcon} />
              </Button>
            </Link>
          ))}
        </ButtonGroup>
      </VStack>
    </Screen>
  );
}