import React from "react";
import PropTypes from "prop-types";
import {
  DirectChatContentHeaderContainer,
  DirectChatContentHeaderFlexContainer,
  PhoneIcon,
  PhoneIconContainer,
  ProfileDetails,
  ProfileImage,
  ProfileLocation,
  ProfileLocationIcon,
  ProfileLocationText,
  ProfileName,
} from "./DirectChatContentHeader.styled";

const DirectChatContentHeader = (props) => {
  return (
    <DirectChatContentHeaderContainer>
      <DirectChatContentHeaderFlexContainer>
        <ProfileImage src={props?.interlucator?.image} />
        <ProfileDetails>
          <ProfileName>{props?.interlucator?.name}</ProfileName>
          <ProfileLocation>
            <ProfileLocationIcon />
            <ProfileLocationText>
              {props?.interlucator?.location}
            </ProfileLocationText>
          </ProfileLocation>
        </ProfileDetails>
      </DirectChatContentHeaderFlexContainer>
      <DirectChatContentHeaderFlexContainer>
        <PhoneIconContainer>
          <PhoneIcon />
        </PhoneIconContainer>
      </DirectChatContentHeaderFlexContainer>
    </DirectChatContentHeaderContainer>
  );
};

DirectChatContentHeader.propTypes = {
  children: PropTypes.node,
  interlucator: PropTypes.any,
};

export default DirectChatContentHeader;
