trampa-frontend/src/components/Cards/ProfileCard/ProfileStats/ProfileStats.js

import React from "react";
import PropTypes from "prop-types";
import {
  ProfileStatsContainer,
  ProfileStatsGrid,
  StatsItem,
} from "./ProfileStats.styled";
import { useTranslation } from "react-i18next";

const ProfileStats = (props) => {
  const { t } = useTranslation();
  return (
    <ProfileStatsContainer>
      <ProfileStatsGrid>
        <StatsItem variant="subtitle2">
          <b>{props.profile?.statistics?.publishes?.count}</b>
          {t("profile.publishes")}
        </StatsItem>

        <StatsItem variant="subtitle2">
          <b>{props.percentOfSucceededExchanges}%</b>
          {t("profile.successExchange")}
        </StatsItem>
      </ProfileStatsGrid>
      <ProfileStatsGrid>
        <StatsItem variant="subtitle2">
          <b>{props.profile?.statistics?.views?.count}</b>
          {t("profile.numberOfViews")}
        </StatsItem>
        <StatsItem variant="subtitle2">
          <b>{props.percentOfSucceededExchanges}%</b>
          {t("profile.successComunication")}
        </StatsItem>
      </ProfileStatsGrid>
    </ProfileStatsContainer>
  );
};

ProfileStats.propTypes = {
  profile: PropTypes.object,
  percentOfSucceededExchanges: PropTypes.number,
};

export default ProfileStats;