import { View, Text, Pressable } from "react-native";
import React from "react";
import Page from "../layouts/Page";
import { background } from "../assets";
import ItemContainer from "../components/ItemContainer/ItemContainer";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import { Input } from "../components/Input";
import GradientButton from "../components/GradientButton";
import { navigate } from "../navigation/NavigationService";
import { Routes } from "../navigation";

const CreatePassword = () => {
  return (
    <Page
      backgroundImg={background.homeBG}
      headerType="NAVIGATION"
      title="Inscription"
    >
      <View style={{ flex: 1, paddingTop: 20 }}>
        <ItemContainer height={300}>
          <View style={{ gap: 32, paddingTop: 5, paddingHorizontal: 5 }}>
            <View style={{ gap: 16 }}>
              <View style={{ gap: 2 }}>
                <Text
                  style={{
                    fontSize: 22,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterSemiBold,
                  }}
                >
                  Choisis un mot de passe{"\n"}sécurisé
                </Text>
                <Text
                  style={{
                    fontSize: 14,
                    color: Palette.gray,
                    fontFamily: FONT_FAMILY.InterRegular,
                  }}
                >
                  Utilise au moins 8 caractères pour sécuriser ton compte.
                </Text>
              </View>
              <Input
                placeholder="Mot de passe"
                label="Mot de passe"
                isBlur
                type="password"
              />
            </View>
            <GradientButton
              title="Suivant"
              containerStyle={{
                width: "80%",
                alignSelf: "center",
              }}
              onPress={() => navigate(Routes.CreateName)}
            />
          </View>
        </ItemContainer>
      </View>
    </Page>
  );
};

export default CreatePassword;
