import React from "react";
import PropTypes from "prop-types";
import {
  NoReviewsAltText,
  NoReviewsContainer,
  NoReviewsText,
} from "./NoReviews.styled";
import UserReviewsSkeleton from "./UserReviewsSkeleton/UserReviewsSkeleton";
import { useTranslation } from "react-i18next";
import useIsMobile from "../../../hooks/useIsMobile";
const NoReviews = () => {
  const { isMobile } = useIsMobile();
  const { t } = useTranslation();
  return (
    <NoReviewsContainer>
      <NoReviewsText>{t("reviews.title")}</NoReviewsText>
      <NoReviewsAltText>{t("reviews.altTitle")}</NoReviewsAltText>
      <UserReviewsSkeleton noReviews numOfElements={isMobile ? 1 : 2} />
    </NoReviewsContainer>
  );
};

NoReviews.propTypes = {
  children: PropTypes.node,
};

export default NoReviews;
