import React from 'react';
import { View } from 'react-native';
import MessageContent from './MessageContent';
import { getMessageText, isMessageContainMedia } from "@/types/ask";

interface MessageBubbleProps {
  item: any;
  isUser: boolean;
  setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: any }>>;
  setCancel: React.Dispatch<React.SetStateAction<boolean>>;
  cancel: boolean;
  t: any;
  setSelectedImages: React.Dispatch<React.SetStateAction<string[]>>;
  setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>;
}

const MessageBubble = ({ 
  item, 
  isUser, 
  setModalVisible, 
  setCancel, 
  cancel, 
  t, 
  setSelectedImages, 
  setModalDetailsVisible
}: MessageBubbleProps) => {
  return (
    <View
      className={`${isUser ? '!bg-bgPrimary ml-10 rounded-full' : '!bg-aiBubble  rounded-2xl'} border-0 ${!isUser && isMessageContainMedia(item) ? '!rounded-t-3xl !rounded-b-2xl' : '!rounded-3xl'} px-4 py-3`}
      style={{ marginRight: getMessageText(item) == "keepSearchIng" ? 0 : isUser ? 0 : 10 }}
    >
      <MessageContent 
        item={item}
        isUser={isUser}
        setModalVisible={setModalVisible}
        setCancel={setCancel}
        cancel={cancel}
        t={t}
        setSelectedImages={setSelectedImages}
        setModalDetailsVisible={setModalDetailsVisible}
      />
    </View>
  );
};

export default React.memo(MessageBubble);