import React from "react";
import PropTypes from "prop-types";
import {
  ChatOffer,
  OfferCardContainer,
  OfferImage,
  OfferImgWrapper,
  OfferText,
  OfferTitle,
} from "./LittleOfferDetails.styled";
import { useTranslation } from "react-i18next";
import { Col } from "../ChatCard.styled";

const LittleOfferDetails = (props) => {
  const chat = props.chat;
  const { t } = useTranslation();
  return (
    <Col mobileDisappear>
      <ChatOffer>
        <OfferImgWrapper>
          <OfferImage src={chat?.offerData?.firstImage} />
        </OfferImgWrapper>
        <OfferCardContainer>
          <OfferText>{t("messages.cardProduct")}</OfferText>
          <OfferTitle>{chat?.offerData?.name}</OfferTitle>
        </OfferCardContainer>
      </ChatOffer>
    </Col>
  );
};

LittleOfferDetails.propTypes = {
  chat: PropTypes.any,
};

export default LittleOfferDetails;
