Elep

import React, { useState } from 'react';
import { IoMdStar, IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
import Carousel from 'nuka-carousel';

const Review = ({review, openModal, index}) => {
	
	const rev = {
		review_id: review._id['$oid'],
		place_slug: review.place_slug,
		index
	}
    return (
        <div className="profile-review">		    
	    	{review.image && review.image.length ? 
			<Carousel
				renderCenterLeftControls={({ previousSlide }) => (
					<button className='review-image-carousel left' onClick={previousSlide}><IoIosArrowBack /></button>
				)}
				renderCenterRightControls={({ nextSlide }) => (
					<button className='review-image-carousel right' onClick={nextSlide}><IoIosArrowForward /></button>
				)}

withoutControls={review.image.length > 1 ? false : true}
			>
				{review.image.map(img => <img className='profile-review-image' src={img} />)}
			</Carousel> : ''}
			<div className="profile-review__details">
				<div className="profile-review__content">
					<h3 className="profile-review__placename">
						<a href={'/places/' + review.place_slug}>{review.place_name}</a> 
					</h3>
					<p className="profile-review__foodname">{review.food_name}</p>
					<span className="profile-review__rating">{Array.from({length: review.rate}).map((rate, i) => <IoMdStar key={i} />)}</span>
					<p className="profile-review__comment">{review.comment}</p>
				</div>
				<div className="profile-review__actions">
					<button onClick={() => openModal(rev)}>
						<svg aria-label="More options" className="_8-yf5 " fill="#262626" height="16" viewBox="0 0 48 48" width="16">
							<circle clipRule="evenodd" cx="8" cy="24" fillRule="evenodd" r="4.5"></circle>
							<circle clipRule="evenodd" cx="24" cy="24" fillRule="evenodd" r="4.5"></circle>
							<circle clipRule="evenodd" cx="40" cy="24" fillRule="evenodd" r="4.5"></circle>
						</svg>
					</button>
				</div>
			</div>
		</div>
    )
}

export default Review