super-app/components/widgets/TitleWithAssetsWidget.tsx

import throttle from "lodash/throttle";
import { useCallback } from "react";
import { StyleSheet, TouchableOpacity, View, ViewStyle } from "react-native";
import { GenericActionPayload } from "../../App/common/actions/GenericAction";
import { CtaData } from "../../App/common/interface";
import { TitleWithAssetsWidgetData } from "../../App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData";
import Colors from "../../assets/colors/colors";
import { StyledImage } from "../StyledImage";
import { StyledLottie } from "./styled-lottie/StyledLottie";
import { StyledText } from "./styled-text/StyledText";

const TitleWithAssetsWidget = ({
  widgetData,
  widgetStyle,
  handleActions,
  widgetIndex,
  handleClick,
}: {
  widgetData: TitleWithAssetsWidgetData;
  widgetStyle: ViewStyle;
  handleActions: (
    value?: any | undefined | null,
    actionPayload?: GenericActionPayload,
  ) => void;
  widgetIndex?: number;
  handleClick?: (ctaData: CtaData) => void;
}) => {
  const throttledHandleActions = useCallback(
    throttle(() => handleActions(null, widgetData?.actions), 700, {
      leading: true,
      trailing: false,
    }),
    [widgetData],
  );
  return (
    <TouchableOpacity
      onPress={() => {
        const { cta, actions } = widgetData || {};
        if (actions && throttledHandleActions) {
          throttledHandleActions();
        } else if (cta && handleClick) {
          handleClick(cta);
        }
      }}
      activeOpacity={1}
    >
      <View
        style={
          widgetData?.titleStyle ? widgetData?.titleStyle : styles.container
        }
      >
        {widgetData?.leftIcon && (
          <View>
            <StyledImage imageFieldData={widgetData?.leftIcon} />
          </View>
        )}
        {widgetData?.leftLottie && (
          <View>
            <StyledLottie lottieFieldData={widgetData?.leftLottie} />
          </View>
        )}
        {widgetData?.title && (
          <View>
            <StyledText textFieldData={widgetData?.title} />
          </View>
        )}
        {widgetData?.rightIcon && (
          <View>
            <StyledImage imageFieldData={widgetData?.rightIcon} />
          </View>
        )}
        {widgetData?.rightLottie && (
          <View>
            <StyledLottie lottieFieldData={widgetData?.rightLottie} />
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    borderWidth: 1,
    borderColor: Colors.hawkesBlue,
    borderRadius: 32,
    paddingHorizontal: 16,
    paddingVertical: 9,
    backgroundColor: Colors.powderBlue,
  },
});

export default TitleWithAssetsWidget;