super-app/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx

import { View, ViewStyle } from "react-native";
import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
import { CtaData } from "../../../App/common/interface";
import { TitleWithColumnWidgetData } from "../../../App/common/interface/widgets/widgetData/TitleWithColumnWidgetData";
import { StyledText } from "../styled-text/StyledText";
import {
  ImageFieldData,
  TextFieldData,
} from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
import { StyledImage } from "../../StyledImage";
import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
import { styles } from "./TitleWithColumnWidgetStyle";

export const TitleWithColumnWidget = ({
  widgetData,
  widgetStyle,
  handleActions,
  handleClick,
  widgetIndex,
}: {
  widgetData: TitleWithColumnWidgetData;
  widgetStyle: ViewStyle;
  handleActions: (
    value?: any | undefined | null,
    screenActionPayload?: GenericActionPayload
  ) => void;
  handleClick?: (cta: CtaData) => void;
  widgetIndex: number;
}) => {
  const ColumnItem = ({
    imageData,
    title,
    subtitle,
  }: {
    imageData?: ImageFieldData;
    title?: TextFieldData;
    subtitle?: TextFieldData;
  }) => {
    return (
      <View style={styles.columnItem}>
        {imageData?.url && <StyledImage imageFieldData={imageData} />}
        {imageData?.url && title?.text && <View style={commonStyles.verticalSpacer16} />}
        {title?.text && <StyledText textFieldData={title} />}
        {title?.text && subtitle?.text && <View style={commonStyles.verticalSpacer4} />}
        {subtitle?.text && <StyledText textFieldData={subtitle} />}
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.columnContainer}>
        {widgetData.title?.text && <StyledText textFieldData={widgetData.title} />}
        {widgetData.title?.text && <View style={commonStyles.verticalSpacer24} />}
        <View style={styles.rowContainer}>
          <ColumnItem
            imageData={widgetData.leftIcon}
            title={widgetData.leftTitle}
            subtitle={widgetData.leftSubtitle}
          />
          <ColumnItem
            imageData={widgetData.rightIcon}
            title={widgetData.rightTitle}
            subtitle={widgetData.rightSubtitle}
          />
        </View>
      </View>
    </View>
  );
};