import React from "react";
import PropTypes from "prop-types";
import {
  CategoryIcon,
  CategoryIconContainer,
  OfferDescriptionCategory,
  OfferDescriptionContainer,
  OfferDescriptionTitle,
} from "./OfferDescription.styled";
import selectedTheme from "../../../../../themes";

const OfferDescription = (props) => {
  return (
    <OfferDescriptionContainer>
      <OfferDescriptionTitle>{props.offerName}</OfferDescriptionTitle>
      <OfferDescriptionCategory>
        <CategoryIconContainer
          color={selectedTheme.colors.iconStrokeDisabledColor}
          component="span"
          size="16px"
        >
          <CategoryIcon />
        </CategoryIconContainer>
        {props.categoryName}
      </OfferDescriptionCategory>
    </OfferDescriptionContainer>
  );
};

OfferDescription.propTypes = {
  offerName: PropTypes.string,
  categoryName: PropTypes.string,
};

export default OfferDescription;
