import { memo } from "react";
import { StyleSheet, Text } from "react-native";
import { CollapsibleMessage } from "@/components/CollapsibleMessage";
import { colors } from "@/lib/theme";

type Props = {
  text: string;
};

function UserMessageComponent({ text }: Props) {
  return (
    <CollapsibleMessage text={text}>
      <Text style={styles.text} selectable>
        {text}
      </Text>
    </CollapsibleMessage>
  );
}

export const UserMessage = memo(UserMessageComponent);

const styles = StyleSheet.create({
  text: {
    color: colors.text,
    fontSize: 15,
    lineHeight: 22,
  },
});