import { Image, SafeAreaView, View } from "react-native";
import React from "react";
import styles from "./style";
import { external } from "../../../styles/externalStyle";
import Images from "@utils/images";
import { appColors } from "@src/themes";
import { useValues } from "@src/utils/context/index";
import { AuthContainerProps } from "../type";

export function AuthContainer({
  container,
  imageviewStyle,
  style,
}: AuthContainerProps) {
  const { isDark, linearColorStyle, bgContainer } = useValues();
  const imageDark = isDark ? Images.authBgDark : Images.authBg;

  return (
    <SafeAreaView
      style={[
        external.fx_1,
        { backgroundColor: isDark ? linearColorStyle : appColors.lightGray },
      ]}
    >
      <View
        style={[
          styles.imageMainView,
          { backgroundColor: isDark ? linearColorStyle : appColors.lightGray },
          imageviewStyle,
        ]}
      >
        <View style={styles.imageView}>
          <Image style={[styles.backgroundImage, style]} source={imageDark} />
        </View>

        <View style={styles.contentContainer}>
          <View style={[styles.container, { backgroundColor: bgContainer }]}>
            <View style={styles.line} />
            <View>{container}</View>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}
