trampa-frontend/src/components/Cards/UserReviewsCard/ReviewerProfile/ReviewerProfile.js

import React from "react";
import PropTypes from "prop-types";
import useIsMobile from "../../../../hooks/useIsMobile";
import { getImageUrl, variants } from "../../../../util/helpers/imageUrlGetter";
import {
  ProfileContainer,
  ProfileImage,
  ProfileImageContainer,
  ProfileName,
} from "./ReviewerProfile.styled";
import history from "../../../../store/utils/history";
import { replaceInRoute } from "../../../../util/helpers/routeHelpers";
import { PROFILE_PAGE } from "../../../../constants/pages";

const ReviewerProfile = (props) => {
  const { isMobile } = useIsMobile();
  const routeToUser = () => {
    history.push(replaceInRoute(PROFILE_PAGE, {
      idProfile: props.userId
    }))
  }
  return (
    <ProfileContainer>
      <ProfileImageContainer>
        <ProfileImage
          onClick={routeToUser}
          src={getImageUrl(props.profileImage, variants.reviewCard, isMobile)}
        />
      </ProfileImageContainer>
      <ProfileName onClick={routeToUser}>{props.profileName}</ProfileName>
    </ProfileContainer>
  );
};

ReviewerProfile.propTypes = {
  profileName: PropTypes.string,
  profileImage: PropTypes.string,
  userId: PropTypes.string,
};

export default ReviewerProfile;