// route("products/:pid", "./product.tsx") or /app/products/:pid ;
import type { Route } from "./+types/product";

export async function loader({
  params,
}: Route.LoaderArgs) {
  const res = await fetch(`/api/products/${params.pid}`);
  const product = await res.json();
  return product;
}

export default function Product({
  loaderData,
}: Route.ComponentProps) {
  const { name, description } = loaderData;
  return (
    <div>
      <h1>{name}</h1>
      <p>{description}</p>
    </div>
  );
}

// app/blog/page.tsx
export default async function Page() {
  const data = await fetch('https://api.vercel.app/blog')
  const posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

// src/routes/index.tsx
import { createFileRoute, useRouter } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";

const countEndpoint = "/api/count";

const getCount = createServerFn({ method: "GET" }).handler(async () => {
  const response = await fetch(countEndpoint);
  const text = await response.text();
  return parseInt(text || "0");
});

export const Route = createFileRoute("/")({
  component: Home,
  loader: async () => await getCount(),
});

function Home() {
  const router = useRouter();
  const count = Route.useLoaderData();

  return (
    <div>{count}</div>
  );
}