"use client";

import { useTranslations } from "next-intl";
import { useTransition } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { openCustomerPortal } from "@/lib/actions/billing";

export function PortalButton({ disabled }: { disabled?: boolean }) {
  const t = useTranslations("Settings.billing");
  const [isPending, startTransition] = useTransition();

  function onClick() {
    startTransition(async () => {
      try {
        const { url } = await openCustomerPortal();
        window.location.href = url;
      } catch {
        toast.error(t("portalError"));
      }
    });
  }

  return (
    <Button type="button" variant="outline" onClick={onClick} disabled={disabled || isPending}>
      {t("managePortal")}
    </Button>
  );
}