import { View, Text } from "react-native-ui-lib";
import React from "react";
import { useAuthContext } from "@/contexts/AuthContext";
import { ImageBackground } from "react-native";

const HeaderTemplate = (props: {
  message: string;
  isWelcome: boolean;
  children?: React.ReactNode;
  link?: React.ReactNode;
}) => {
  const { user, profileData } = useAuthContext();

  const headerHeight:number = 80;
  return (
    <View row centerV marginV-15>
      <ImageBackground
      source={require("../../assets/images/profile-picture.png")}
        style={{
          height: headerHeight,
          aspectRatio: 1,
          borderRadius: 22,
          overflow: "hidden",
          marginRight: 20,
        }}
      />
      <View gap-3>
        {props.isWelcome && (
          <Text text70L style={{fontSize: 17, fontFamily: "Manrope_400Regular"}}>Welcome, {profileData?.firstName}!</Text>
        )}
        <Text text70B style={{ fontSize: 18, fontFamily: "Manrope_700Bold" }}>
          {props.message}
        </Text>
        {props.children && <View>{props.children}</View>}
        {props.link && <View marginT-8>{props.link}</View>}
      </View>
    </View>
  );
};

export default HeaderTemplate;