import React from "react";
import PropTypes from "prop-types";
import {
  UserReviewsSkeletonCircle,
  UserReviewsSkeletonContainer,
  UserReviewsSkeletonItemsContainer,
  UserReviewsSkeletonLine,
  UserReviewsSkeletonLineFifth,
  UserReviewsSkeletonLineForth,
  UserReviewsSkeletonLineOne,
  UserReviewsSkeletonLineSecond,
  UserReviewsSkeletonLineThird,
  UserReviewsSkeletonSquare,
} from "./UserReviewsSkeleton.styled";

const UserReviewsSkeleton = (props) => {
  const array = Array.apply(null, Array(props.numOfElements)).map(() => {});
  return (
    <UserReviewsSkeletonContainer>
      {array.map((item, index) => (
        <UserReviewsSkeletonItemsContainer key={index}>
          <UserReviewsSkeletonLine>
            <UserReviewsSkeletonCircle />
            <UserReviewsSkeletonLineOne />
          </UserReviewsSkeletonLine>
          <UserReviewsSkeletonLine>
            <UserReviewsSkeletonSquare />
            <UserReviewsSkeletonLineSecond />
          </UserReviewsSkeletonLine>
          <UserReviewsSkeletonLine>
            <UserReviewsSkeletonLineThird />
          </UserReviewsSkeletonLine>
          <UserReviewsSkeletonLine>
            <UserReviewsSkeletonLineForth />
          </UserReviewsSkeletonLine>
          <UserReviewsSkeletonLine>
            <UserReviewsSkeletonLineFifth />
          </UserReviewsSkeletonLine>
        </UserReviewsSkeletonItemsContainer>
      ))}
    </UserReviewsSkeletonContainer>
  );
};

UserReviewsSkeleton.propTypes = {
  children: PropTypes.node,
  numOfElements: PropTypes.number,
};

export default UserReviewsSkeleton;
