import { Link, Outlet, createFileRoute } from "@tanstack/react-router";
import { X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { EmptyState, SectionCard } from "@/components/ledger/Primitives";

function QueriesLayoutError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <SectionCard>
      <EmptyState
        icon={X}
        title="Unable to load this query."
        description={error.message || "Something went wrong while opening this question."}
        action={
          <div className="flex flex-wrap justify-center gap-2">
            <Button variant="outline" onClick={reset}>
              Try again
            </Button>
            <Button variant="ghost" asChild>
              <Link to="/queries">Back to Client queries</Link>
            </Button>
          </div>
        }
      />
    </SectionCard>
  );
}

export const Route = createFileRoute("/queries")({
  head: () => ({
    meta: [{ title: "Client queries — Amanah" }],
  }),
  component: QueriesLayout,
  errorComponent: QueriesLayoutError,
});

function QueriesLayout() {
  return <Outlet />;
}