import { PersonCircle, StarFill } from "react-bootstrap-icons";

export default function Review({ review }) {
  const rating = [...Array(review.attributes.rating)].map((value: undefined, index: number) =>
      <StarFill size={12} color="rgb(156 163 175)"/>
  );

  return(
    <>
      <div className="grid grid-cols-10 w-3/5 my-4">
        <div className="flex flex-col col-span- justify-center mx-2">
          <div className="text-black">
            {review.attributes.author_name}
          </div>
          <div>
            <PersonCircle size={32} color="rgb(156 163 175)"/>
          </div>
          <div className="flex inline-flex my-2">
            {rating}
          </div>
        </div>
        <div className="flex col-span-8 justify-start">
          <div className="border-solid border-2 border-gray-200">
            {review.attributes.review}
          </div>
        </div>
      </div>
    </>
  );
}