import { DefaultButton } from "@/element/buttons";
import Modal from "@/element/modal";
import { SendZaps } from "@/element/send-zap";
import { NostrStreamProvider } from "@/providers";
import { useState } from "react";
import { FormattedMessage } from "react-intl";

export default function AccountTopup({ provider, onFinish }: { provider: NostrStreamProvider; onFinish: () => void }) {
  const [topup, setTopup] = useState(false);
  return (
    <>
      <DefaultButton onClick={() => setTopup(true)}>
        <FormattedMessage defaultMessage="Topup" />
      </DefaultButton>
      {topup && (
        <Modal id="topup" onClose={() => setTopup(false)}>
          <SendZaps
            lnurl={{
              name: provider.name,
              canZap: false,
              maxCommentLength: 0,
              getInvoice: async amount => {
                const pr = await provider.topup(amount);
                return { pr };
              },
            }}
            onFinish={onFinish}
          />
        </Modal>
      )}
    </>
  );
}
