import React from "react";
import PropTypes from "prop-types";
import {
  OfferDescriptionContainer,
  OfferImage,
  OfferImageContainer,
  OfferInfo,
  RemoveIcon,
  RemoveIconContainer,
} from "./DeleteOfferLabeledCard.styled";
import {
  getImageUrl,
  variants,
} from "../../../../../util/helpers/imageUrlGetter";
import useIsMobile from "../../../../../hooks/useIsMobile";

const DeleteOfferLabeledCard = (props) => {
  const { isMobile } = useIsMobile();
  return (
    <OfferInfo>
      <OfferImageContainer>
        <OfferImage
          src={getImageUrl(
            props.offer.images[0],
            variants.deleteChat,
            isMobile
          )}
        />
      </OfferImageContainer>
      <OfferDescriptionContainer
        offerName={props.offer.name}
        categoryName={props.offer.category.name}
      />
      <RemoveIconContainer>
        <RemoveIcon />
      </RemoveIconContainer>
    </OfferInfo>
  );
};

DeleteOfferLabeledCard.propTypes = {
  offer: PropTypes.node,
};

export default DeleteOfferLabeledCard;
