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";
import { getImageUrl, variants } from "../../../../util/helpers/imageUrlGetter";
import useIsMobile from "../../../../hooks/useIsMobile";

// Not being used, but kept for potential future needs
const LittleOfferDetails = (props) => {
  const { t } = useTranslation();
  const { isMobile } = useIsMobile();
  const chat = props.chat;
  return (
    <Col mobileDisappear>
      <ChatOffer>
        <OfferImgWrapper>
          <OfferImage
            src={getImageUrl(
              chat?.offerData?.firstImage,
              variants.offerCard,
              isMobile
            )}
          />
        </OfferImgWrapper>
        <OfferCardContainer>
          <OfferText>{t("messages.cardProduct")}</OfferText>
          <OfferTitle>{chat?.offerData?.name}</OfferTitle>
        </OfferCardContainer>
      </ChatOffer>
    </Col>
  );
};

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

export default LittleOfferDetails;
