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

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

  const headerHeight: number = 72;

  const styles = StyleSheet.create({
    pfp: {
      height: headerHeight,
      aspectRatio: 1,
      borderRadius: 22,
      overflow: "hidden",
      marginRight: 20,
      backgroundColor: profileData?.eventColor ?? colorMap.pink,
    },
    pfpTxt: {
      fontFamily: "Manrope_500Medium",
      fontSize: 30,
      color: 'white',
    },
  });

  return (
    <View row centerV marginV-15>
      {profileData?.pfp ? (
        <Image source={{ uri: profileData.pfp }} style={styles.pfp} />
      ) : (
        <View style={styles.pfp} center>
          <Text style={styles.pfpTxt}>
            {user?.email?.at(0)}
            {user?.email?.at(1)}
          </Text>
        </View>
      )}
      <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;