import React from "react";
import PropTypes from "prop-types";
import {
  MessageCardContainer,
  MessageContent,
  MessageDate,
  MessageText,
  ProfileImage,
} from "./MessageCard.styled";
import { formatDateTime } from "../../../util/helpers/dateHelpers";

const MessageCard = (props) => {
  const message = props.message;

  const dateString = formatDateTime(new Date(message._created));
  return (
    <MessageCardContainer isMyMessage={props.isMyMessage}>
      <ProfileImage src={props.image} />
      <MessageContent isMyMessage={props.isMyMessage}>
        <MessageText isMyMessage={props.isMyMessage}>
          {props.message.text}
        </MessageText>
        <MessageDate isMyMessage={props.isMyMessage}>{dateString}</MessageDate>
      </MessageContent>
    </MessageCardContainer>
  );
};

MessageCard.propTypes = {
  children: PropTypes.node,
  message: PropTypes.any,
  image: PropTypes.string,
  isMyMessage: PropTypes.bool,
};

export default MessageCard;
