import React from 'react';

import Container from '../../shared/Container';
import { Flex } from '../../../styles/components/shared/Flex.style';
import { BlockReview } from '../../../styles/components/main/Review.style';
import { TextualReview } from '../../../typings/entities';
import RichText from '../../RichText';
import { Avatar } from '../../../styles/components/shared/Avatar.style';

interface Props {
  title: string;
  reviews: TextualReview[];
}

const Review: React.FC<Props> = ({ title, reviews }) => {
  function renderStars (grade: number): string {
    let stars = '';
    for (let i = 0; i < grade; i++) {
      stars += '★';
    }
    for (let i = grade; i < 5; i++) {
      stars += '☆';
    }
    return stars;
  }

  return (
      <Container color="grey">
        <>
          <h2 className="mb">{title}</h2>
          <Flex wrap="wrap">
            {reviews.map((review, index: number) => (
                <BlockReview key={`review-product-${index}`}>
                  <Flex justifyContent="space-between">
                    <span>{renderStars(review.review_grade)}</span>
                    {review.review_platform_logo?.url && <img src={review.review_platform_logo.url} alt={review.review_platform_logo.alt} />}
                  </Flex>
                  <RichText content={review.review_text} />
                  <Flex>
                    {review.review_author_avatar?.url && <Avatar url={review.review_author_avatar.url} />}
                    <strong>{review.review_author}</strong>
                  </Flex>
                </BlockReview>
            ))}
          </Flex>
        </>
      </Container>
  );
};

export default Review;