import { Text } from "./components/ui/text";
import { VStack } from "./components/ui/vstack";
import { Box } from "./components/ui/box";
import { HStack } from "./components/ui/hstack";
import React from "react";
import SigninForm from "./components/form/SigninForm";
import Screen from "./components/Screen";
import { Heading } from "./components/ui/heading";
import { Link } from "expo-router";
import { LinkText } from "./components/ui/link";

export default function SigninPage() {
  return (
    <Screen>
      <Box className="h-full justify-center">
        <VStack space="2xl">
          <VStack space="sm">
            <Heading className="text-center" size="2xl">
              Inscris-toi gratuitement
            </Heading>
            <Text size="lg" className="text-center">
              Génère un programme personnalisé en quelques clics et 1 minute !
            </Text>
          </VStack>
          <SigninForm />
          <HStack className="justify-center items-center" space="xs">
            <Text>Tu as déjà un compte ?</Text>
            <Link href="/LoginPage">
              <LinkText bold={true}>Connectes-toi !</LinkText>
            </Link>
          </HStack>
        </VStack>
      </Box>
    </Screen>
  );
}