"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="flex items-center gap-1.5 rounded-md border border-muted/40 bg-surface px-3 py-2 text-sm font-medium text-fg/80 transition-colors hover:border-accent/60 hover:text-accent disabled:opacity-50"
        >
          <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>
  );
}