import React from "react";
import { ImageFieldData } from "../App/common/interface/widgets/widgetData/TitleWidgetData";
import { Image } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { CtaData } from "../App/common/interface";

export const StyledImage = ({
  imageFieldData,
  handleClick,
}: {
  imageFieldData: ImageFieldData;
  handleClick?: (ctaData: CtaData) => void;
}) => {
  if (!imageFieldData?.url) return <></>;

  return imageFieldData?.cta ? (
    <TouchableOpacity
      onPress={() => handleClick && handleClick(imageFieldData?.cta!!)}
    >
      <Image
        source={{ uri: imageFieldData?.url }}
        style={imageFieldData?.imageStyle}
      />
    </TouchableOpacity>
  ) : (
    <Image
      source={{ uri: imageFieldData?.url }}
      style={imageFieldData?.imageStyle}
    />
  );
};