"use strict";

import React, { forwardRef } from 'react';
import styled from 'styled-components/native';
import { View } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const MessageContainer = styled.View`
  display: flex;
  flex-direction: ${props => !props.isUser ? 'row' : 'row-reverse'};
  align-items: center;
  margin: 10px 0;
  width: 100%;
`;
export const MessageBubble = styled.View`
  background-color: ${props => !props.isUser ? '#f1f0f0' : '#0052CD'};
  color: ${props => !props.isUser ? '#000' : '#fff'};
  border-radius: 12px;
  padding: 10px;
  max-width: 60%;
`;
export const MessageText = styled.View`
  margin: 0;
  flex-wrap: wrap;
`;
export const UserName = styled.Text`
  font-weight: bold;
  color: ${props => props.color ? props.color : props.isUser ? '#0052CD' : '#333'};
  margin-right: 8px;
`;
export const MessageTimestamp = styled.Text`
  font-size: 13px;
  color: #999;
  margin-left: 8px;
`;
export const MessagePhoto = styled.Image`
  max-width: 100%;
  border-radius: 8px;
  margin-top: 8px;
`;
export const MessagePhotoContainer = styled.Text`
  max-width: 100px;
  margin: 0;
`;
export const SystemMessage = styled.Text`
  background-color: #e0e0e0;
  color: #555;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  margin: 10px 0;
  max-width: 60%;
`;
export const SystemMessageText = styled.Text`
  margin: 0;
  font-size: 14px;
  color: #333;
`;
const CustomMessageExample = /*#__PURE__*/forwardRef(({
  message,
  isUser
}, ref) => {
  return /*#__PURE__*/_jsx(View, {
    ref: ref,
    style: [{
      flexDirection: isUser ? 'row-reverse' : 'row',
      alignItems: 'center',
      marginVertical: 10,
      width: '100%'
    }],
    children: /*#__PURE__*/_jsxs(MessageBubble, {
      isUser: isUser,
      children: [/*#__PURE__*/_jsx(UserName, {
        isUser: isUser,
        children: message.user.name
      }), /*#__PURE__*/_jsx(MessageText, {
        children: message.body
      }), /*#__PURE__*/_jsx(MessageTimestamp, {
        children: message.timestamp
      })]
    })
  });
});
export default CustomMessageExample;
//# sourceMappingURL=CustomMessage.js.map