import React from "react";
import styled from "styled-components";

const OutcomingBox = 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, message }) => {
  return (
    <OutcomingBox>
      <MsgContainer>
        <MsgBox>
          <Msg /> {message} Outcoming Message
        </MsgBox>
        <TimeBox>
          <Time /> {time} Monday 00:00
        </TimeBox>
      </MsgContainer>
    </OutcomingBox>
  );
};