import { Link, useLoaderData } from "react-router-dom";
import ProductListing from "../../components/product_listing";
import SearchBar from "../../components/search_bar";
import MainContentLayout from "../../components/main_content_layout";

export default function Products() {
  const products = useLoaderData().data;
  const productList = products.data.map(product =>
    <li key={product.id}>
      <ProductListing product={product}/>
    </li>
  );

  return(
    <>
      <MainContentLayout>
        <SearchBar path="/products"/>
        <ul>
          {productList}
        </ul>
      </MainContentLayout>
    </>
  );
}