import { Text } from "./components/ui/text";
import { VStack } from "./components/ui/vstack";
import { Button, ButtonGroup } from "./components/ui/button";
import { Feather } from "@expo/vector-icons";
import { HStack } from "./components/ui/hstack";
import React from "react";
import { FeatherIconNames } from "@expo/vector-icons/build/Feather";
import { Box } from "./components/ui/box";
import { Heading } from "./components/ui/heading";
import { Link } from "expo-router";
import { LinkText } from "./components/ui/link";
import LoginForm from "./components/form/LoginForm";
import Screen from "./components/Screen";

const socialNetworkButtons: ISocialNetworkButtons[] = [
  { icon: "instagram" },
  { icon: "facebook" },
  { icon: "linkedin" },
];

interface ISocialNetworkButtons {
  icon: FeatherIconNames;
}

export default function LoginPage() {
  return (
    <Screen>
      <Box className="h-full justify-center">
        <VStack space="2xl">
          <VStack space="sm">
            <Heading className="text-center" size="3xl">
              Connexion à Optifit
            </Heading>
            <Text size="lg" className="text-center">
              Personnalise ton expérience du sport avec Optifit, ton nouveau
              coach IA.
            </Text>
          </VStack>
          <LoginForm />
          <ButtonGroup className="justify-center" flexDirection="row">
            {socialNetworkButtons.map((socialNetworkButton) => (
              <Button
                key={socialNetworkButton.icon}
                size="xl"
                variant="outline"
                action="primary"
              >
                <Feather name={socialNetworkButton.icon} size={27} />
              </Button>
            ))}
          </ButtonGroup>
          <VStack>
            <HStack className="justify-center items-center" space="xs">
              <Text>Tu n'as pas encore de compte ?</Text>
              <Link href="/SigninPage">
                <LinkText bold={true}>Inscris-toi !</LinkText>
              </Link>
            </HStack>
            <Link className="text-center" href="/ResetPasswordPage">
              <LinkText bold={true}>Mot de passe oublié ?</LinkText>
            </Link>
          </VStack>
        </VStack>
      </Box>
    </Screen>
  );
}