"use client";

import { useRouter } from "next/navigation";
import { ActionButton } from "@/components/ActionButton";
import { createDraft } from "@/data/drafts/actions";
import { useAuthAction } from "@/auth/useAuthAction";
import "./NewTrailButton.css";

interface NewTrailButtonProps {
  text?: string;
}

export function NewTrailButton({ text = "+ new trail" }: NewTrailButtonProps) {
  const router = useRouter();
  const requireAuth = useAuthAction();

  const createAction = requireAuth(async () => {
    const rkey = await createDraft();
    router.push(`/drafts/${rkey}`);
  });

  return (
    <ActionButton action={createAction} className="NewTrailButton" pendingChildren="creating...">
      {text}
    </ActionButton>
  );
}
