super-app/components/reusable/static-header/StaticHeader.tsx

import { useEffect } from "react";
import { BackHandler, TouchableOpacity, View } from "react-native";
import { HARDWARE_BACK_PRESS, ImageName } from "../../../App/common/constants";
import { CtaData } from "../../../App/common/interface";
import { AppImage } from "../../AppImage";
import { styles } from "./StaticHeaderStyle";

export const StaticHeader = ({
  handleClick,
  leftIcon,
  rightIcon,
  leftIconCta,
  rightIconCta,
}: {
  handleClick?: (ctaData: CtaData) => void;
  leftIcon?: keyof typeof ImageName;
  rightIcon?: keyof typeof ImageName;
  leftIconCta?: CtaData | null;
  rightIconCta?: CtaData | null;
}) => {
  const handleBackButtonClick = () => {
    handleClick && leftIconCta && handleClick(leftIconCta);
    return true;
  };
  useEffect(() => {
    BackHandler.addEventListener(HARDWARE_BACK_PRESS, handleBackButtonClick);
    return () => {
      BackHandler.removeEventListener(
        HARDWARE_BACK_PRESS,
        handleBackButtonClick,
      );
    };
  }, [leftIconCta]);
  return (
    <View style={styles.container}>
      {!!leftIconCta && (
        <TouchableOpacity
          onPress={() => {
            handleClick && leftIconCta && handleClick(leftIconCta);
          }}
          activeOpacity={1}
        >
          <AppImage
            imageCode={leftIcon || ImageName.CROSS}
            style={styles.leftImageStyle}
          />
        </TouchableOpacity>
      )}
      {!!rightIconCta && (
        <TouchableOpacity
          onPress={() => {
            handleClick && rightIconCta && handleClick(rightIconCta);
          }}
          activeOpacity={1}
        >
          <AppImage
            imageCode={rightIcon || ImageName.HELP}
            style={styles.rightImageStyle}
          />
        </TouchableOpacity>
      )}
    </View>
  );
};