import { useLoaderData } from "react-router-dom";
import { CartPlusFill } from "react-bootstrap-icons"
import ProductListing from "../../components/product_listing";
import MainContentLayout from "../../components/main_content_layout";
import Review from "../../components/review";
import "../../components/stylesheets/shared.css"

export default function Product() {
  const response = useLoaderData();
  const product = response[0].data;
  const reviews = response[1].data.data.map(review =>
    <li key={review.id}>
      <Review review={review}/>
    </li>
  );

  return (
    <>
      <MainContentLayout>
        <ProductListing product={product.data}/>
        <div className="my-2 flex flex-flow-reverse w-4/6">
          <div>
            <button className="flex inline-block rounded button px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
              <CartPlusFill size={16}/>
              <span className="mx-2">Añadir al carrito</span>
            </button>
          </div>
        </div>
        <div className="my-4">
          <ul>
            {reviews}
          </ul>
        </div>
      </MainContentLayout>
    </>
  );
}