import React from "react";
import styled from "styled-components";
import { parse, format } from "date-fns";

const MessageWrapper = styled.div`
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 10px;
  margin-top: 20px;
  margin-right: 10px;
`;

const MsgContainer = styled.div`
  display: flex;
  flex-direction: column;
`;

const MsgBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #54a0ff;
  color: white;
  border-radius: 20px;
  margin-bottom: 10px;
`;

const Msg = styled.span`
  font-size: 20px;
  padding: 20px 10px;
`;

const TimeBox = styled.div`
  display: flex;
  justify-content: flex-end;
  align-items: center;
  opacity: 0.8;
`;

const Time = styled.span`
  font-size: 15px;
`;

export default ({ time, text }) => {
  return (
    <MessageWrapper className="MessageWrapper">
      <MsgContainer>
        <MsgBox>
          <Msg> {text} Outcoming Message </Msg>
        </MsgBox>
        <TimeBox>
          <Time> {format(parse(time, "MM/DD/YYYY hh:mma"))} </Time>
        </TimeBox>
      </MsgContainer>
    </MessageWrapper>
  );
};