import LoginForm from "@/components/form/LoginForm";
import Button from "@/components/ui/Button";
import Screen from "@/components/ui/Screen";
import Text from "@/components/ui/Text";
import { Feather } from "@expo/vector-icons";
import { Link } from "expo-router";
import { View } from "react-native";

export default function LoginPage() {
  interface ISocialNetworkButtons {
    icon: any;
  }
  const socialNetworkButtons: ISocialNetworkButtons[] = [
    { icon: "instagram" },
    { icon: "facebook" },
    { icon: "linkedin" },
  ];

  return (
    <Screen>
      <View className="justify-center gap-4 h-full">
        <View className="gap-2">
          <Text position="center" size="3xl" weight="bold">
            Connexion à Optifit
          </Text>
          <Text position="center" size="xl">
            Personnalise ton expérience du sport avec Optifit, ton nouveau coach
            IA.
          </Text>
        </View>
        <LoginForm />
        <View className="flex-row justify-center gap-4">
          {socialNetworkButtons.map((socialNetworkButton) => (
            <Button
              className="w-[4.5rem] h-[4.5rem]"
              key={socialNetworkButton.icon}
              size="xl"
              style="outline"
            >
              <Feather
                name={socialNetworkButton.icon}
                size={26}
                color={"black"}
              />
            </Button>
          ))}
        </View>
        <View className="gap-2">
          <Text position="center">
            Tu n'as pas encore de compte ?{" "}
            <Link href="/sign-in">
              <Text weight="bold" isLink={true}>
                Inscris-toi !
              </Text>
            </Link>
          </Text>
          <Link href="/reset-password">
            <Text position="center" weight="bold" isLink={true}>
              Mot de passe oublié ?
            </Text>
          </Link>
        </View>
      </View>
    </Screen>
  );
}