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

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

    const headerHeight: number = 72;
    return (
        <View row centerV marginV-15>
            <Image
                source={{uri: profileData?.pfp}}
                style={{
                    height: headerHeight,
                    aspectRatio: 1,
                    borderRadius: 22,
                    overflow: "hidden",
                    marginRight: 20,
                }}
            />
            <View gap-3>
                {props.isWelcome && (
                    <Text text70L style={{
                        fontSize: 19,
                        fontFamily: "Manrope_400Regular"
                    }}>Welcome, {profileData?.firstName}!</Text>
                )}
                <Text text70B style={{fontSize: 18, fontFamily: "Manrope_600SemiBold"}}>
                    {props.message}
                </Text>
                {props.children && <View>{props.children}</View>}
                {props.link && <View marginT-8>{props.link}</View>}
            </View>
        </View>
    );
};

export default HeaderTemplate;