import React from "react";
import PropTypes from "prop-types";
import {
  Details,
  OfferDescriptionText,
  OfferDescriptionTitle,
  OfferImage,
  OfferLittleDetails,
  OfferTitle,
  Scroller,
} from "./OfferDetails.styled";
import { useTranslation } from "react-i18next";

const OfferDetails = (props) => {
  const offer = props.offer;
  const { t } = useTranslation();
  return (
    <Details
      hasScrollBar={!props.showPublishButton}
      exchange={props.showExchangeButton}
    >
      <OfferTitle>{offer?.offer?.name}</OfferTitle>
      <Scroller>
        {offer?.offer?.images?.map((item) => {
          return <OfferImage src={item} key={item} />;
        })}
      </Scroller>
      <OfferLittleDetails>
        <OfferDescriptionTitle>
          {t("itemDetailsCard.description")}
        </OfferDescriptionTitle>
        <OfferDescriptionText showBarterButton={props.showExchangeButton}>
          {offer?.offer?.description}
        </OfferDescriptionText>
      </OfferLittleDetails>
    </Details>
  );
};

OfferDetails.propTypes = {
  offer: PropTypes.any,
  showExchangeButton: PropTypes.bool,
  showPublishButton: PropTypes.bool,
};

export default OfferDetails;
