import React from 'react';
import { Button } from '../../atoms';
import { Review, ReviewProps } from '../Review/Review';

type ReviewsProps = {
  reviews: ReviewProps[];
};

const Reviews = ({ reviews }: ReviewsProps) => {
  const currentReview = reviews?.[0];
  return (
    <div className=''>
      <header className='flex justify-between items-center pb-6'>
        <div className='text-gray-900 text-2xl font-semibold leading-7'>
          Reviews({(reviews || []).length})
        </div>
        <div>
          <Button className='bg-primary-10 hover:bg-primary-10 text-primary-500'>
            Leave a review
          </Button>
        </div>
      </header>
      <section className='text-gray-600 pb-8'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu
        placerat lacus. Nulla luctus ut urna vel lobortis. Mauris posuere dolor
        vel ex eleifend, cursus eleifend neque molestie.
      </section>
      {!!currentReview && (
        <Review
          reviewContent={currentReview.reviewContent}
          rating={currentReview.rating}
          profileImage={currentReview.profileImage}
          userName={currentReview.userName}
          subHeader={currentReview.subHeader}
          likes={currentReview.likes}
        />
      )}
    </div>
  );
};

export { Reviews, ReviewsProps };
