"use client";
import { createPublicationDraft } from "actions/createPublicationDraft";
import { ActionButton } from "components/ActionBar/ActionButton";
import { ButtonSecondary } from "components/Buttons";
import { AddTiny } from "components/Icons/AddTiny";
import { useRouter } from "next/navigation";

export function NewDraftActionButton(props: { publication: string }) {
  let router = useRouter();

  return (
    <ActionButton
      id="new-leaflet-button"
      primary
      onClick={async () => {
        let newLeaflet = await createPublicationDraft(props.publication);
        router.push(`/${newLeaflet}`);
      }}
      icon=<AddTiny className="sm:m-1 shrink-0 sm:scale-100 scale-75" />
      smallOnMobile
      label="Draft"
    />
  );
}
