import React from "react";
import type { Route } from "../+types/root";
import z from "zod";

const productSchema = z.array(
  z.object({
    id: z.string(),
    name: z.string(),
    price: z.number(),
    pid: z.string(),
  })
);

export async function loader() {
  const res = await fetch("http://localhost:3000/products");
  const data = await res.json();

  const products = productSchema.safeParse(data);

  if (!products.success) {
    return console.log("error zod schema");
  }

  // console.log({ products: products.data });
  return { products: products.data };
}

const productsPage = ({ loaderData }: Route.ComponentProps) => {
  const { products } = loaderData;
  console.log(loaderData);

  return (
    <div>
      <h1>Product List Page</h1>
      <p>Our Latest Products:</p>
      {!products || products.length === 0 ? (
        <p>Product not found</p>
      ) : (
        <ul>
          {products.map((item) => (
            <li key={item.id}>
              {item.name} - {item.price}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default productsPage;