import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useInternalAlertDialogContext } from "./alert-dialog-context";

/** Props for AlertDialog.Action. */
export interface AlertDialogActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: JSX.Element;
}

/** Confirms the action and closes the AlertDialog. */
export function AlertDialogAction(props: AlertDialogActionProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children", "onClick"]);
  const ctx = useInternalAlertDialogContext();

  const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (e) => {
    if (typeof local.onClick === "function") local.onClick(e);
    ctx.setOpen(false);
  };

  return (
    <button type="button" onClick={handleClick} {...rest}>
      {local.children}
    </button>
  );
}