"use client";

import { useTransition } from "react";
import "./AccentButton.css";

type Props = {
  children: React.ReactNode;
  action?: () => Promise<void> | void;
  pendingChildren?: React.ReactNode;
  disabled?: boolean;
  type?: "button" | "submit";
  size?: "medium" | "large";
};

export function AccentButton({
  children,
  action,
  pendingChildren,
  disabled = false,
  type = "button",
  size = "large",
}: Props) {
  const [isPending, startTransition] = useTransition();

  const handleClick = (e: React.MouseEvent) => {
    if (!action || isPending) return;
    e.stopPropagation();
    startTransition(async () => {
      await action();
    });
  };

  const classNames = ["AccentButton", `AccentButton--${size}`, isPending && "AccentButton--pending"]
    .filter(Boolean)
    .join(" ");

  return (
    <button
      type={type}
      onClick={handleClick}
      disabled={disabled || isPending}
      className={classNames}
    >
      {isPending && pendingChildren ? pendingChildren : children}
    </button>
  );
}
