import { createFileRoute } from "@tanstack/react-router";
import { listAccountContainers, stopAccountContainerFn } from "~/fns/containers";
import { useAction } from "~/hooks/use-action";
import { ContainerSessionList } from "~/components/containers/ContainerSessionList";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/settings/containers")({
  loader: () => listAccountContainers({ data: { org: null } }),
  component: UserContainersPage,
});

function UserContainersPage() {
  const overview = Route.useLoaderData();
  const stop = useAction(stopAccountContainerFn);
  return (
    <div className="space-y-4">
      <div>
        <Heading level={2} size="md">
          Editor containers
        </Heading>
        <p className="text-sm text-kumo-subtle">
          Containers you started from the editor's "Run in container". Time is billed to you per second.
        </p>
      </div>
      <ContainerSessionList
        overview={overview}
        canStop
        error={stop.error}
        pending={stop.pending}
        onStop={(sessionId) => stop.run({ data: { org: null, sessionId } })}
      />
    </div>
  );
}