import { createFileRoute, useRouter } from "@tanstack/react-router";

export const Route = createFileRoute("/posts")({
  loader: ({
    context: {
      outlets,
      client: { refresh, getFlightResponse },
    },
    cause,
  }) => {
    if (cause === "stay") {
      delete outlets.posts;
      refresh("posts");
    }
    if (outlets.posts) {
      return Promise.resolve(outlets.posts);
    }
    return getFlightResponse("/posts", { outlet: "posts" });
  },
  component: Posts,
});

function Posts() {
  const data = Route.useLoaderData();
  const router = useRouter();

  return (
    <div>
      <h1>Posts</h1>
      {data}
      <button
        className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-300"
        onClick={() => router.invalidate()}
      >
        Refresh
      </button>
    </div>
  );
}