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

const IncomingBox = styled.div`
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 20px 10px;
  margin-top: 20px;
  margin-left: 10px;
`;

const MsgContainer = styled.div`
  display: flex;
  flex-direction: column;
  margin-left: 10px;
`;

const MsgBox = styled.div`
  background-color: #20bf6b;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  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-start;
  align-items: center;
  opacity: 0.7;
`;

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

export default ({ time, text }) => {
  return (
    <IncomingBox className="IncomingMsg">
      <ImgIconBox />
      <MsgContainer>
        <MsgBox>
          <Msg /> {text} Incoming Message
        </MsgBox>
        <TimeBox>
          <Time /> {time} Monday 00:00
        </TimeBox>
      </MsgContainer>
    </IncomingBox>
  );
};