import { useState } from "react";
import { useTranslation } from "react-i18next";
import { ImageBackground, Platform, StyleSheet, View } from "react-native";
import BackButton from "../components/common/buttons/back-button";
import FlatButton from "../components/common/buttons/flat-button";
import CheckBox from "../components/common/checkbox/checkbox";
import IconInputField from "../components/common/input/icon-input-field";
import ScreenWrapper from "../components/common/screen-wrapper";
import AppText from "../components/common/typography/app-text";
import AppColors from "../utils/constants/colors";
import { StatusBarColor } from "../utils/types/enums";

const RegisterScreen: React.FC = () => {
  const [isChecked, setIsChecked] = useState(false);
  const { t } = useTranslation();

  // submit register credentials
  const handleRegisterUser = async () => {
    const token = "your_jwt_token";
  };

  const handleToggle = (checked: boolean) => {
    setIsChecked(checked);
  };

  return (
    <ScreenWrapper
      backgroundColor={AppColors.white}
      statusBarColor={StatusBarColor.dark}
    >
      <ImageBackground
        source={require("../assets/misc/ellipse.png")}
        style={styles.splatterContainer}
        resizeMode='contain'
      >
        <View style={styles.textPlacement}>
          <AppText fontStyle='bodyMedium' colorStyle='white'>
            {t("register.welcome-1")}
          </AppText>
          <AppText
            fontStyle='bodyMedium'
            colorStyle='white'
            style={