import React from 'react';
import { StaticImageData } from 'next/image';

interface ReviewCard {
  id: number;
  rate: number;
  comment: string;
  userName: string;
  userSurname: string;
  avatar: StaticImageData;
  monthOfPost: string;
  yearOfPost: number;
}

//styles
import s from './ReviewCard.module.scss';
import UserIcon from '../Navbar/UserIcon';
import ReviewStars from '../ReviewStars';

const ReviewCard = ({ reviewCard }: { reviewCard: ReviewCard }) => {
  return (
    <article className={s.reviewCard}>
      <div className={s.starsDate}>
        <ReviewStars rate={reviewCard.rate} />
        <p>
          {reviewCard.monthOfPost} {reviewCard.yearOfPost}
        </p>
      </div>
      <p className={s.comment}>{reviewCard.comment}</p>
      <div className={s.cardFooter}>
        <UserIcon />
        <p>
          {reviewCard.userName} {reviewCard.userSurname}
        </p>
      </div>
    </article>
  );
};

export default ReviewCard;