super-app/components/widgets/HeaderWithAssetsWidget.tsx

import {
  View,
  ViewStyle,
  StyleSheet,
  BackHandler,
  TouchableOpacity,
  Image,
} from "react-native";
import { GenericActionPayload } from "../../App/common/actions/GenericAction";
import { StyledImage } from "../StyledImage";
import { StyledLottie } from "../StyledLottie";
import { HeaderWithAssetsWidgetData } from "../../App/common/interface/widgets/widgetData/HeaderWithAssetsWidgetData";
import { CtaData } from "../../App/common/interface";
import { StyledText } from "./styled-text/StyledText";
import { useEffect } from "react";

const HeaderWithAssetsWidget = ({
  widgetData,
  widgetStyle,
  handleActions,
  widgetIndex,
  handleClick,
}: {
  widgetData: HeaderWithAssetsWidgetData;
  widgetStyle: ViewStyle;
  handleActions: (
    value?: any | undefined | null,
    screenActionPayload?: GenericActionPayload
  ) => void;
  widgetIndex: number;
  handleClick?: (ctaData: CtaData) => void;
}) => {
  const handleBackButtonClick = () => {
    handleActions(null, widgetData?.action);
    handleClick &&
      widgetData?.leftIcon?.cta &&
      handleClick(widgetData?.leftIcon?.cta);
    return true;
  };

  useEffect(() => {
    BackHandler.addEventListener("hardwareBackPress", handleBackButtonClick);
    return () => {
      BackHandler.removeEventListener(
        "hardwareBackPress",
        handleBackButtonClick
      );
    };
  }, [widgetData]);

  return (
    <View style={[styles.container, widgetStyle]}>
      {widgetData.leftIcon && (
        <TouchableOpacity onPress={() => handleBackButtonClick()}>
          <Image
            source={{ uri: widgetData.leftIcon?.url }}
            style={widgetData.leftIcon?.imageStyle}
          />
        </TouchableOpacity>
      )}
      {widgetData.leftLottie && (
        <StyledLottie
          lottieFieldData={widgetData?.leftLottie}
          handleClick={handleClick}
        />
      )}
      {widgetData.centerTitle && (
        <StyledText textFieldData={widgetData?.centerTitle} />
      )}
      {widgetData.rightIcon && (
        <StyledImage
          imageFieldData={widgetData?.rightIcon}
          handleClick={handleClick}
        />
      )}
      {widgetData.rightLottie && (
        <StyledLottie
          lottieFieldData={widgetData?.rightLottie}
          handleClick={handleClick}
        />
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
  },
});
export default HeaderWithAssetsWidget;