import React from "react";
import PropTypes from "prop-types";
import {
  MiniChatCardContainer,
  ProfileDetails,
  ProfileImage,
  ProfileName,
  ProfileProduct,
  ProfileProductName,
} from "./MiniChatCard.styled";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";

const MiniChatCard = (props) => {
  const { t } = useTranslation();
  const history = useHistory();
  const changeChat = () => {
    history.push(`/messages/${props?.chat?.chat?._id}`);
  };
  return (
    <MiniChatCardContainer selected={props.selected} onClick={changeChat}>
      <ProfileImage src={props?.chat?.interlocutorData?.image} />
      <ProfileDetails>
        <ProfileName selected={props.selected}>
          {props?.chat?.interlocutorData?.name}
        </ProfileName>
        <ProfileProduct selected={props.selected}>
          {t("messages.cardProduct")}
        </ProfileProduct>
        <ProfileProductName selected={props.selected}>
          {props?.chat?.offerData?.name}
        </ProfileProductName>
      </ProfileDetails>
    </MiniChatCardContainer>
  );
};

MiniChatCard.propTypes = {
  children: PropTypes.node,
  chat: PropTypes.any,
  selected: PropTypes.bool,
};

export default MiniChatCard;
