import React from "react";
import styled from "styled-components";
import ProfileIcon from "./ProfileIcon";
import moment from "moment";

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

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

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

const MsgBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  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 ({ text, avatar, time }) => {
  console.log(time);
  let UTCTime = moment();
  return (
    <MessageWrapper className="MessageWrapper">
      <MsgContainer>
        <ProfileIcon avatar={avatar} />
        <ColumnBox>
          <MsgBox>
            <Msg> {text} </Msg>
          </MsgBox>
          <TimeBox>
            <Time>{UTCTime}</Time>
          </TimeBox>
        </ColumnBox>
      </MsgContainer>
    </MessageWrapper>
  );
};