import { useLoaderData } from "react-router-dom";
import { cartLoader } from "../../clients/loaders";
import ProductCart from "../../components/product_cart";
import { Product } from "../../models/product";
import MainContentLayout from "../../components/main_content_layout";
import { CartXFill } from "react-bootstrap-icons";

export default function Cart() {
  let products;
  const data = useLoaderData() as Array<Product>;

  if(data.length > 0) {
    products = data.map(product =>
      <ul>
        <li key={product.id}>
          <ProductCart product={product}/>
        </li>
      </ul>
    );
  }
  else {
    products = (
      <div>
        <div className="flex justify-center my-4 w-4/6">
          <CartXFill color="rgb(55 65 81)" size={256}/>
        </div>
        <div className="flex justify-center my-4 w-4/6 text-2xl text-gray-900 my-2">
          Su carrito está vacío, añada algunos productos para empezar a comprar.
        </div>
      </div>
    );
  }

  return(
    <>
      <MainContentLayout>
        {products}
      </MainContentLayout>
    </>
  );
}