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

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

export default NoReviews;
