knur-app/components/load-route-button.tsx

"use client";

import { useActionState } from "react";
import { Map } from "lucide-react";
import { loadActivityRoute, type LoadRouteState } from "@/app/running/actions";

export function LoadRouteButton({ activityId }: { activityId: string }) {
  const [state, formAction, pending] = useActionState(
    async (): Promise<LoadRouteState> => loadActivityRoute(activityId),
    null
  );

  return (
    <div className="flex flex-col gap-2">
      <form action={formAction}>
        <button
          type="submit"
          disabled={pending}
          className="btn btn-secondary"
        >
          <Map size={15} className={pending ? "animate-pulse" : ""} />
          {pending ? "Pobieranie mapy..." : "Załaduj mapę trasy"}
        </button>
      </form>
      {state && "error" in state ? <p className="text-sm text-accent">{state.error}</p> : null}
    </div>
  );
}