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-4/6 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">
          <textarea id="message" rows={4} className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" disabled>
            {review.attributes.review}
          </textarea>
        </div>
      </div>
    </>
  );
}